I have a form that I would like to style. specifcally I would like to chnage the background color of the form item's label. (the backgorundColor attribute changes both the label and the inputs background color)
i.e.
<mx:Form>
<mx:FormItem label="username:">
<mx:TextInput />
</mx:FormItem>
</mx:Form>
I would like to make the label with 'username:' have a different background color, but have the text input still be the default background color.
is this possible with a FormItem ?
A formitem has an object it uses to display the label called the FormItemLabel, this objects purpose is so you can style the label of a form item.
In flex 2 to change the style you can try:
FormItemLabel {
}
However I looked over the flex 2 lang ref and it doesn't seem like you can change the background color of the label. Click here for lang ref link
If you are using flex 3 the desired way to change the label of the FormItem is through the formitems labelStyleName
FormItem {
labelStyleName: newStyle;
}
However once again I don't believe they added the ability to change the background color of the label itself. Click here for lang ref link
Best choice of action if this is required would be to extend the formitem class, unless anyone else has any ideas.
Hope this helps...
As I see problem "hangs unanswered" for two years... and I need exactly the same functionality - different background color for label side.
I am using Flex3. I tried Form background - that changes whole form. Then tried FormItem - if you have only text entry - it does cover background, but if you have few buttons, gap between them is also of the same color. You then need extra HBox with another background. And also there is no gap between Label background and input control.
I do not want to rewrite FormItem control.
Seems I will need to use my ancestors style: Grid instead of forms and GridItem instead of FormItem. Then you can style each cell in whatever color. :o(
Try using the flex style explorers to create your desired style:
Flex 3 Style Explorer
Flex 2 Style Explorer
I used the TextArea in the style explorer and formatted the background color which gave the following css output:
TextArea {
backgroundColor: #0000ff;
}
You can change this to the following to include in you stylesheet:
.formLabel {
backgroundColor: #0000ff;
}
Then in the FormItem tag:
<FormItem label="Label" styleName="formLabel" />
More info on Flex Style Sheets:
Flex Style Sheets
These examples will show that you can declare styles within the mxml Style tags rather than an external style sheet if you would like.
Related
After trying to find a solution for Centering Text on a Button with Offset, I'm doing now a custom component.
The goal is to make a button-like component that has an icon on one side and a centered text filling the rest of the button.
The component contains either two Label/ Buttons to display the Icon and text. Both of them have a background Image, defined in css.
The css looks like this for Icon and the text with exchanged image as background for text
#button-icon-cancel{
-fx-font-family: "Arial";
-fx-padding: 0,0,0,0;
-fx-background-color: transparent;
-fx-font-size: 28px;
-fx-graphic: url('images/button/cancel.png');
}
#button-icon-cancel:pressed{
-fx-graphic: url('images/button/cancel-pressed.png');
}
The images are loaded by setId(). Currently both components are added to a Panel before passing to the stage. They contain an OnClickEvent for processing.
Now to the actual question
How can I achieve that if one Component is clicked, the other one is getting the :pressed from css as well?
Adding the ClickEvent to the Panel is doing nothing (regarding clicking on either Label/ Button)
Adding both of them to a HBox, adding the Event to the HBox work in that regard, that I can click either component and the Event gets fired, BUT the :pressed State is only applied to the component you clicked.
Is it possible to give all childs the notification, that they should behave like they got pressed? Since we have a lot of small Icon, but only one background for the text, placing a Label over the whole thing create a lot of unneeded wasted Image space. Also this would cause the problematic for changing font color if not all css are changed at once (the label-over-button-solution with .setMouseTransparent(true) wouldn't change the font color of the text label since the label doesn't notice button is pressed)
First of all, JFX-8 will support wider range of css improvements, which will allow you to solve the issue easier.
To solve your issue, i can suggest the following : each node have a pressed property. You can add a listener on this property, and when it changes to true, use setStyle(String) method on needed nodes, and use setStyle(null | "") on changing to false.
I am trying to make a text area in flex 4.5. The problem is i need some part of it as bold not all. Also i need border.
A simple code is
<s:TextArea text="Text here1 Text here2">
By default s:TextArea contain border but I cant bold only one part of text that is "text here1"
If I try to use mx:TextArea Then I cant add border to it.
Please if anyone can help over how to add border along with if i can make only a part of text as bold or of different color etc.
Why can't you add a border to mxTextArea? There are a couple of ways:
specify borderStyle css property;
write a skin class, which draws a border and background you need, and assign it to borderSkin css property;
draw a 3x3 graphic skin and assign it to borderSkin css property.
Place a border container around the control
Use the textFlow property instead of the text property and you will be able to use rich text (bold, italics and so on).
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/elements/TextFlow.html
Is there an easy way to change the background color of a Flex 4 spark Button without messing with skins?
UPDATE: ok, figured it out, simply set the chromeColor attribute of the Button mxml.
For spark components, you can use chromeColor style:
<s:Button chromeColor="0xff0000" label="chrome red"/>
You can change the color style of the button. You can also have a bitmap fill.
Update: The above methods do not change the background.
Easiest way to change the background, you can use - opaqueBackground property.
Here is another way to change the background of a button without changing its skin -
1. Create a group with a rectangle and your button.
2. Set opaqueBackground of your button to null.
3. Make width and height of rectangle to 100%
4. whatever color you fill the rectangle with is the background of your button.
This can also be done via code like :-
btnID.addEventListener(MouseEvent.MOUSE_OVER, textChange);
btnID.addEventListener(MouseEvent.MOUSE_OUT, textChangeback);
private function textChange(event:MouseEvent):void
{
btnLinkDelete.setStyle("color", 0xFFFFFF)
btnLinkDelete.setStyle("chromeColor", 0x535151)
}
private function textChangeback(event:MouseEvent):void
{
btnLinkDelete.setStyle("color", 0x000000)
btnLinkDelete.setStyle("chromeColor", 0xfcffff)
}
I am posting it, if anyone want to change background color on mouse hover.
i have a dropdown list and text box. i disabled both controls using code behind. now, at one sight we can understand the dropdown list is disabled , because the background color of drop down list is changed automatically.
i want to make that same background color to the text box control too. But i dont know what color code is that. i am working in asp.net . Any suggestions??
Try this
<asp:TextBox ID="txtCDate" runat="server" CssClass="textbox" BackColor="#efefef" />
Actually, the "disabled" color may vary depending on the browser ...
AFAIK, Firefox would put in a grey background to a disabled input box, and you could customize this behaviour via css with a selector like
input[disabled='disabled'] {
... styles go here ...
}
The problem is probably IE-specific, and in that case, this CSS selector would not work... You would probably need to add a specific CSS class to the disabled element to have more control over its look.
You could check this article about this issue : Shawn asks the CSS Guy about styling disabled text inputs
Assuming the reason the text box colors are different is because they have been explicitly set at some point during form validation.
To avoid having to explicitly set the grey color, and instead let the browser set the color to the "disabled" color automatically you could remove the custom color attribute from the text box.
"you can set the BackColor property to Color.Empty"
. . From a Similar Question answered by dustyburwell
In other words, something like myValidatedTextBox.BackColor = Color.Empty
I'm trying to change the background color and or text color of a BorderContainer in flex 4 using Action Script, but have not idea how to.
The Border Container component doesn't seem to have any properties like:
idname.color = "#333333";
idname.backgroundcolor = "#333333";
How might I go about doing this?
thanks!
You can set styles (which are different from properties) in ActionScript like so:
idname.setStyle("backgroundColor", 0xff0000);
Not sure if this is the only way to do it, but by creating a css style your able to change the background, text color, and other style attributes and call the style's name in Action Script.
idname.styleName = "css-stylename";