I have a simple button in a mxml file, if I set the skinClass property in the tag itself it works, however, if I set the skinClass property in an external css file, it doesn't apply to the button.
Works:
view.mxml
<s:Button id="btnRefresh" skinClass="skins.RefreshButtonSkin"/>
Doesn't work:
view.mxml
<s:Button id="btnRefresh"/>
style.css
#btnRefresh
{
skinClass: ClassReference("skins.RefreshButtonSkin");
fontSize: 12px;
}
Someone knows how I can get this css working?
Note: I can apply other styles to the button using the css, eg fontSize works
Edit: Additional info
The button is nested in the actionContent part of my view
view.mxml
<s:actionContent>
<s:Button id="btnRefresh"/>
</s:actionContent>
The css file is declared in my main mxml file
main.mxml
<fx:Style source="style.css"/>
I'm compiling for flex 4.5.1, it's a mobile application
It would seem that this is a bug in the ActionBar component. I've tried id selector (#btnRefresh), class selector (.btnRefreshStyle), component selector (s|Button) and #Thembie's suggestion.
I've tried using skinClass and skin-class.
None of these work when the button resides in the actionContent property of the View component. But it all works fine when you move the button to the View component.
So I'm afraid you're stuck with hard-coding that skinclass. You might consider filing a bug report.
s|Button#btnRefresh
{
skinClass: ClassReference("skins.RefreshButtonSkin");
}
defaults.css in the mobile theme has style rules for ActionBar with a higher CSS "specificity" level than the ID selector you're using.
Short answer: Use #actionGroup #btnRefresh as your selector.
Long answer: ActionBar has the following selectors for rules to support the "defaultButtonAppearance" style in the mobile theme:
ActionBar Group#navigationGroup Button
ActionBar Group#actionGroup Button
ActionBar.beveled Group#navigationGroup Button
ActionBar.beveled Group#actionGroup Button
These are in place to make it easy to swap out the flat-look buttons with the iOS-styled "beveled" buttons.
Jason was right, the default.css in mobile theme override your s|Button#btnRefresh style.
In order for your skin to work, just make your style stronger like:
s|ActionBar s|Group#navigationGroup s|Button#btnRefresh{...}
Related
I'm relatively new to angular. In the process of converting a React app to Angular just for learning purposes. I have a parent component that has a button (Custom Button Component). This button when loaded in the parent should be hidden and on hover should show the button. So you probably get an idea that I have some CSS selectors related to the parent component that override the child CSS. First should be display: none and then on hover I change it to display: flex
So the first problem I encountered was that I could not override the child CSS from the parent CSS. After reading all kinds of posts I moved the CSS overrides from the parent CSS to the global stylesheet and also added encapsulation: ViewEncapsulation.None to the child component.
Next thing I noticed is that the align-items: center was not working on the child. First thought I had that guess I have to add that part to the global styles also? but what I really need to know is that is this the norm in Angular? If yes, then some things don't make sense to me. These styles are really not global. They are only related to the parent component then it seems kind of weird to add those to the global stylesheet.
In regards to the align-items not aligning the child (custom-button), I believe that happens because of the extra div being added around the button. So how do you handle such situations?
Appreciate any advice/tips.
Thank you!
You can overwrite children CSS classes from the parent componet. this is the way:
Assuming your child component have this CSS
.child-class {
background-color: blue;
}
When you use this component the background color will be blue. But if you want to change that color to RED. In the parent component where you want the change you need to do this:
In your parent component
:host {
::ng-deep{
.child-class {
background-color: red;
}
}
}
:host this refers to the component's HTML tag (that is created by Angular, in your case the tag of the component that contains the app-custom-button). Also you can apply css to the component tag.
for example:
:host{
width: 100vw;
height: 100vh
}
And with ::ng-deep you can overwrite ALL styles inside your compoent. Does not matter if is a style from your child compoenent, grandchild, great-great-grandson, etc... even if its a component from an external library.
So... For example you can have the "custom background color as blue" then in one component you can keep that color but in other component you can change the color to red and in other component you can change the color to green....
Angular have the concept of ViewEncapsulation. By default, the value is set to ViewEncapsulation.Emulated and the css you put in the component is specific to the component and only to this component. The CSS will not be applied to the child components.
You can switch to ViewEncapsulation.None and you will disable this behavior and all the css rules in your css file will be applied to all your components in the application, and maybe you don't want this behavior. That's why I advice you to leave this option.
The other option you got is to put your specific css rule in src/style.css (if you didn't modify the default path). All css rules put in this file will be applied for all the application and you can keep the ViewEncapsulation of your component.
For align-items, i think you are right : the app-custom-button is wrapping your button, so you need to set a width: 100% to your button, then eventualy resize your app-custom-button
I have a Flex application with a main class that is a WindowedApplication. The CSS file is loaded using the <fx:Style source="defaults.css"> tag in the MXML.
However, when this main class will open a NativeWindow, the CSS does not get applied. I have a subclass of NativeWindow where I can add some things, but this is ActionScript, not MXML. Is there an equivalent of <fx:Style/> for AS? Or do I have to do things in a different way?
UPDATE:
None of the proposed solutions so far seem to be working. I will try to write a small test app to show the behaviour, maybe it is a bug in the Flex framework.
I think you'll need to load the styles via a compiled stylesheet (as a SWF). You can compile a stylesheet to a SWF with MXMLC (mxmlc stylesheet.css). Then use StyleManager.loadStyleDeclarations(swf) to load and apply the styles.
You might have to do all styling with
someComponent.setStyle("someProperty", "someValue");
There's also a [StyleSheet](You can use StyleSheets parseCSS method class that you could use but it only applies to TextField elements IIRC
Have you tried using global selectors in your CSS?
like
global {
color: #000000;
}
or
s|Button
{
color: #FFFFFF;
skinClass:ClassReference("com.what.skins.ButtonSkin");
}
I have these things in my main application file in a style block and they are applied to all views
I am trying to define my Flex 4 Skins via CSS but I my custom skin will not display. Here is what I am doing:
In my application I import my css and define the styleName in my button:
<fx:Style source="styles.css"/>
<s:Button label="Button" styleName="circle"/>
Here is my CSS:
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|Button.circle
{
skinClass: ClassReference("skins.buttons.CircleButton");
}
My understanding is that my button should be supplied it's skinClass via the CSS but it fails to work. If I define the skinClass directly like below it works fine:
<s:Button label="Button" skinClass="skins.buttons.CircleButton"/>
Any help would be appreciated.
Make sure you have your CSS file under the root Application file first. Second, I would try to do the css without the type selector, so instead of s|Button.circle, just do .circle.
EDIT
You can also try putting the style in a Style tag within the same container as your button to see if that works. Are you sure your application can find your style.css? Showing more code might help the situation.
Per the official Flex CSS documentation:
Class Selector: A CSS class selector
matches components that meet a class
condition. The CSS syntax to declare a
class selector is to prefix the
condition with a dot. You can either
declare a class selector as a
condition of a type selector, or
universally to any type that meets the
class condition.
.header { background-color: #CCCCCC; }
HBox.footer { background-color: #999999; }
Note: In Flex a class condition is met
using the styleName attribute on a
component. For example, you may have
two classes of HBox: "header" and
"footer". Above, the first selector
applies to any component with
styleName="header"; the second
selector should only apply to HBox
components with styleName="footer"
(something that actually needs to be
fixed and enforced in Gumbo, as
to-date class selectors have only been
universal and any type in the selector
is ignored).
It looks like selectors may not be working in Gumbo...
I have a few styles that I want to apply to a slider.
I'm aware of the MXML method of definig a mx:Style tag
<mx:Style>
HSlider{
}
.SliderHighlightTrackSkin{
}
.SliderTrackSkin{
}
.SliderThumbSkin{
}
</mx:Style>
Instead of doing it this way I want to define all the styles in a style sheet. I then want to define my slider in a .as file (not an mxml file) and apply the stylesheet to it.
How I can I do this?
Something like the following is what I'm after
levelSlider= new VSlider()
levelSlider.minimum=0;
levelSlider.maximum=1;
levelSlider.value=1;
levelSlider.y=150
levelSlider.styleName="sliderStyle.css"
this.addChild(levelSlider)
You can include the style sheet into your Flex application from the mxml file of Application class using <mx:Style source="style.css"/> You can add as many css files as needed.
Now if you have a .customCSSClass{} in the css file, you can apply that to your vSlider using vSlider.styleName = "customCSSClass". Global selectors like HSlider{} will apply automatically.
I've got this mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:htmlText>
<![CDATA[
link me<b>bold me</b>
]]>
</mx:htmlText>
</mx:Text>
</mx:Application>
(In reality, the html content is coming from an xml file.) I want to give the link a color. So I've got this in my css file:
a { color:#339900; }
But I get a warning: "The CSS type selector 'a' was not processed, because the type was not used in the application."
I also tried:
a:link { color:#339900; }
and the warning changes to: "CSS selector condition type is not supported: ':link'
According to the live docs, it seems like I should be able to do both things. What am I missing?
Also I'm using a font that has no bold, but I want to use the fontThickness property to create one. I've got it working when I apply it to an entire object or class, thus:
.thickenMe { fontThickness: 150; }
I want to apply it to the [b] tag, but I'm getting similar warnings as with the [a].
From what you're describing, it sounds like you're trying to put styles in a stylesheet in your Flex application. That won't work. The stylesheets you're working in are used to style the application, not html content within the application.
If you want to render styled text in a htmlText block, follow the pattern described here:
Flex 3 - Applying cascading style sheets
Use StyleSheet::parseCSS to import custom CSS definition then the styleSheet property of mx:Text to attach it.
var ss : StyleSheet = new StyleSheet;
ss.parseCSS("a{color:#2222ff;} a:hover{text-decoration: underline;}");
tmsg.styleSheet=ss;
tmsg.htmlText="blabla.bla";
You need to apply the css to the content of the htmlText object not the whole application.
There should be a "styleSheet" property or similar on the htmlText object you can set.
You can do like this
some text http://www.orf.at'>http://www.orf.at some text