Why I can't apply my CSS Class to hello?
{name: "hello", content: "Hello From Enyo",className:"myClass",ontap: "helloTap"},
Enyo 2.0 changed the way you specify classes for your components. You should no longer specify styles or classes in your kind definitions. If you need to do so you can use 'classes' instead of 'className'.
The recommended way is to call addClasses (was addClass in Enyo 1.0) inside your create function. To add styles directly, call addStyles.
You can still "cheat" with the old style, just use classes instead of className
From the documentation I've read you seem to be doing it correctly.
http://enyowiki.com/
(scroll to the bottom)
developer.Palm
I've tried the same thing and I can't get it to work using an external style sheet.
You can always do the style in enyo with the style keyword.
style:"background-color:blue;height: 50px; width: 30px;"
But this definitely is not good if you want to have multiple objects with the same style.
Good question, hopefully someone will find an answer.
........................................
While writing this I tried testing out some other options. I used the .addClass("css-class")
function after creating a kind(http://enyojs.com/api/#enyo.Control::addClass). See the code below:
enyo.kind({
name: "Menu",
kind: "Control",
components: [
{name: "back", tag:"div"}
]
});
var menu = new Menu();
menu.addClass("box");
menu.write();
My css is then in an external style sheet:
.box{
background-color:red;
width: 520px;
height: 600px;
margin:auto;
margin-top:75px;
}
Hope that helps. If you find a better way please share it.
Related
I am working on an Angular2 project and my application is mostly built with the PrimeNG framework delivered by the same company that creates PrimeFaces.
I ran into a problem, where I want to customize the colors and the overall appearance of an Accordion panel, and I can't figure out how to get it done with the styleClass property.
Where should I set it? WebStorm doesn't seem to like it if I do it this way:
<p-accordionTab header="Personal Information" styleClass="myStyleClass">
Content
</p-accordionTab>
Furthermore, I'd love to know how should I craft my CSS in order to make it work?
Appreciate your input! :)
I am working with primeng as well and the way it should work based on your example is the following:
p-accordionTab.myStyleClass {
width: 500px;
}
BUT there are a lot of bugreport that styleClass is not working properly.
So I advise you to use the default style classes primeng defines:
ui-accordion
ui-accordion-header
ui-accordion-content
so using them like this in style.css is working for me:
.ui-accordion {
width: 500px
}
You can define your .css file in your angular-cli.json the following way:
"styles": [
"styles.css"
]
Hope it helps!
if your looking for easy ngClass solution
here's a small example
(..)
<p-accordionTab [selected]="true" [ngClass]="elementFilter ? 'highLightFoundElement' : ''">
(...)
:host ::ng-deep .highLightFoundElement > div > a{
background-color: blueviolet !important; //your choice colour
}
I have understood the concept of CSS modules so much that I am convinced that I do not want to do anything else that that for the future.
Currently I am trying to refactor an existing app to use CSS modules, the app has used classic sass with BEM methodology since.
Before I describe my problem I want to make clear that I undestand that I am addressing an issue that is not really within the domain of CSS modules. One should apply styles solely for usage inside a single module. At the most one should compose CSS classes with other CSS classes of other modules. But basically: You build an (HTML-)module and you use CSS modules to style that module and that's that.
Here's the problem:
In the process of refactoring there is one single issue that derives from having had a SASS-based style system. I can't find a valid method to work with a CSS class within a CSS modules environment when this class should work in combination of another class from another module.
Example in SASS:
[page.scss]
.wrapper {
margin: 0;
}
[headline.scss]
.headline {
color: green;
}
.wrapper {
.headline {
color: orange;
}
}
As you can see: One module (page) defines a CSS class "wrapper", another module defines a CSS class "headline". And, additionally, the class "headline" should behave a bit differently when placed inside the class "wrapper".
Again, I know that this is not really the domain of CSS modules. But I really would like to know if this is somehow doable with CSS modules? The "composes"-feature of CSS modules does not really fit here...
This is a common issue when migrating to CSS Modules. In short, a css module cannot override a style from another css module, and this is by design. Styles are supposed to live with the components that render them, and nowhere else.
What you can do to refactor this is to create a component style variant and explicitly set the variant through a prop when rendered within your wrapper.
For example, suppose your headline component currently looks something like this:
CSS
.headline {
color: green;
}
JSX
import styles from "Headline.css";
const Headline = () => {
return (
<div className={styles.headline} />
);
}
Rather than trying to override the .headline class name from somewhere else, you can create a variant class name that you toggle through a prop:
CSS
.headline-green {
color: green;
}
.headline-orange {
color: orange;
}
JSX
import styles from "Headline.css";
const Headline = ({orange}) => {
return (
<div className={orange ? styles.headlineOrange : styles.headlineGreen} />
);
}
And when you render it from your wrapper, set it to the orange variant:
<Headline orange />
Tip: you can use composes to eliminate duplicate common styles between your variants.
My code:
myTextItem = new TextItem();
myTextItem.setHint("Some text");
myTextItem.setShowHintInField(true);
myTextItem.setHintStyle("myTextItemHint");
My css:
.myTextItemHint {
color: gray;
}
My Problem:
My issue is that I can have that setShowHintInField(true) set OR my css getting applied, but not both.
I found more info about this on the link: http://forums.smartclient.com/showthread.php?t=14463 but I cannot come up with a common style / place for it, that would make the trick while the hint is inside the field.
My question:
What kind of css would I need in this case and how I tell the field to use it?
What I have tried:
With that setShowHintInField(true) line and without. Both cases: half of the solution is there. Not both halves.
FormItem has method setCellStyle() to set the style of specific cell.
Use
myTextItem.setCellStyle("myTextItemHint");
your CSS will look like this:
.myTextItemHint, .myTextItemHint input {
color: gray;
}
Override other properties also if needed
.textItem,.textItemFocused,.textItemDisabled,.textItemDisabledHint,.textItemError,.textItemHint
For more information on CSS, Please have a look at skin_styles.css that is already shipped along with standard skins in SmartGWT.
I am using a webGrid and would like to be able to change the width of the columns. I am using the following code for the style but it seems to have no affect.
webGrid.Column(columnName: "TRP_Comments", header: "Comments",style: "width:500px;"),
Is this not what style is suppose to do?
Thanks
Bruce
The style property doesn't set the style attribute but the class attribute. Yeah, I know, WTF. The designers of the WebGrid component must have been mentally disturbed at the moment they choose the name of this optional argument. The whole dynamic and optional arguments stuff they put into this component makes me hate it like hell and never use it in any application.
Anyway, you could define a custom CSS class in your separate CSS file:
.comments {
width: 500px;
}
and then assign this class to the corresponding <td> elements:
webGrid.Column(columnName: "TRP_Comments", header: "Comments", style: "comments")
I'd like to have the images of a playing card displayed with CSS. But it would be great if there was a templating language that could set up a style like:
.playing-card-(.*) {
width: 30px
height: 40px
background-image: "/images/cards/$1.gif"
}
Does such a thing exist?
I'd love for this to exist but where I've had to do simular tasks I've had to rely on the server side to write the background-image as an inline style or use JS to do it (eg if I'm loading the data via AJAX).
I don't know if there is any CSS technology that will do this for you. Though it's not ideal, you can use jQuery to achieve this:
I would start by assigning a common class to each card "cards", then using jQuery to iterate through each item, assigning the appropriate CSS to the element.
$('.cards').each(function(index,element) {
$(element).css('background-image','url(images/cards/'+index+'.gif)');
});