Flex Checkbox Label Vertical Alignment

If you notice the label of a checkbox is not centered vertically by default and there is no property to adjust the vertical alignment of the label. The property provided in the API is changing the location of a label. There wasn’t any solution available on the internet to this issue. Hence I came up with a solution that inherit from CheckBox class and in the updateDisplayList method set the ‘y’ location of its label. You can even apply some css style to the label.

public class InputCheckBox extends CheckBox
{
       override protected function updateDisplayList(unscaledWidth:Number,  unscaledHeight:Number):void
       {
              super.updateDisplayList(unscaledWidth, unscaledHeight);
              textField.styleName = 'InputCheckBoxLabel';
              textField.y = 3;
       }
}
Advertisements

2 thoughts on “Flex Checkbox Label Vertical Alignment

  1. Richard

    Hello

    What is the definition for:
    InputCheckBoxLabel

    ???

    I would like to vertically and horizontally center my checkbox but cannot figure out how to do this?

    Reply
    1. 2cupsoftech Post author

      The definition of InputCheckBoxLabel can be any stylesheet selector, that doesn’t matter.

      You should use the textField coordinates to change the positioning as in the example.

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s