Checkbox does not display properly in Flex

1
votes

I have a checkbox that does not render as a checkbox and would be displayed as something similar to a button. However, it behaves like a checkbox where I can select it and the handler works with the firing event.

Here is my checkbox. I also tried it outside the or , but it has the same behavior. There is no CSS related to checkbox or the part that I am working on. I am using Flex 4.5 though.

1- Has anybody encounter such a problem?

2- Is there any way to enforce the layout inside a container and item renderer?

<mx:HBox>
    <mx:CheckBox id="Test"
        label="Label"
        fontWeight="bold"                                
                change="Test_changeHandler(event)"/>        
</mx:HBox>
4
apache-flexuser-interfaceflash-builderflex4.5
What is the problem? The syntax of your question is very confusing. - Sam DeHaan
the checkbox is displayed as a button - paradisonoir
That is very strange. Everything appears correct, so I have no idea where the problem could come from without seeing more code. - Sam DeHaan
do you have any idea about my second question? any suggestion? - paradisonoir
Are you using a custom theme? Which version of the Flex SDK are you using? Can you provide a runnable sample so we can test your code and see the problem ourselves? I don't understand your second question. What is the layout you want to enforce? Inside which container? Inside an itemRenderer for what? - JeffryHouser

4 Answers

4
votes

If you're using Flex 4.5, why are you using Flex 3 components? Change this to spark components and everything should be much better:

<s:HGroup>
    <s:CheckBox id="Test"
        label="Label"
        fontWeight="bold"                                
                change="Test_changeHandler(event)"/>        
</s:HGroup>
3
votes

mx:CheckBox extends mx:Button, so if you put added css that skinned mx:Button, mx:CheckBox would also get it. It's a shortcoming of flex 3 skinning. You can workaround by explicitly setting the mx:CheckBox skin.

Edit: try this

<mx:HBox>
    <mx:CheckBox id="Test"
        label="Label"
        fontWeight="bold"                                
        skin="{mx.skins.spark.CheckBoxSkin}"
        change="Test_changeHandler(event)"
        />        
</mx:HBox>
1
votes

This happend to me also. Fix was to use a mx:Container as parent instead of FlexGlobals.application on the popup component.

0
votes

for the second question:

I had exactly the same problem and i forced it to take the "original" skin with:

var skinClass:Class = mx.skins.spark.CheckBoxSkin;
theCheckBoxInstance.setStyle("skin", skinClass);

Because in my case the CheckBox was an ItemRenderer for a DataGrid, I've put it in the overridden createChildren methode right after the super call..

I have no explication why this happens. I encountered it in an old monster project where I was charged to make some changes...