CODEWITHSUNDEEP
apache-flexflex4
1.21 gigawatts
1.21 gigawatts

Reputation: 17770

How do I set the minimum label width in a Spark FormItem?

Is there a way to set the minimum label width in a Spark FormItem? I have the following code and the checkbox is way to close to the label. I'd like to be able set a minimum label width. 

<s:Form id="form1" width="100%">
    <s:layout>
        <s:FormLayout id="formLayout1" />
    </s:layout>
    <s:FormItem label="Numbers" >
        <s:CheckBox id="numbersCheckbox" />
    </s:FormItem>
    <s:FormItem label="Letters" >
        <s:CheckBox id="lettersCheckbox" />
    </s:FormItem>
    <s:FormItem >
        <s:Button id="myButton" 
                 label="My Label">
        </s:Button>
    </s:FormItem>
</s:Form>

I've come up with a partial solution but it has side effects. I use the following CSS and it moves the column over but it also affects any label with the id, "labelDisplay". Look at the button when using this CSS: 

    spark|FormItemSkin #labelDisplay {
        paddingRight: 50;
        color: red;
    }

Upvotes: 1

Views: 328

Answers (1)

splash
splash

Reputation: 13327

I think the cleanest or rather the best reusable approach would be to create your own FormItemSkin to modify the gap between the FormItem's label and the content.

A quick solution could be the usage of separate layout objects for your form items:

<s:Form id="form1" width="100%" >
    <s:layout>
        <s:FormLayout id="formLayout1"/>
    </s:layout>
    <s:FormItem label="Numbers"  >
        <s:layout>
            <s:HorizontalLayout paddingLeft="10"/>
        </s:layout>
        <s:CheckBox id="numbersCheckbox" />
    </s:FormItem>
    <s:FormItem label="Letters" >
        <s:layout>
            <s:HorizontalLayout paddingLeft="10"/>
        </s:layout>
        <s:CheckBox id="lettersCheckbox" left="20" />
    </s:FormItem>
</s:Form>

Upvotes: 2

Related Questions