Question

I am currently modifying a flex GUI to give it a new look. I am new to flex but I manage to get most of the work done. However I have a problem with comboboxes: I use a rather big font size and the bottom of some characters is truncated (“g” for example, or any character going under the baseline):

I first thought it was a problem with the component height, but even with a very large height the characters got truncated, with big empty spaces above and under the text.
I looked for a solution on the net but did not find one. Worst: I was not able to find references to my problem though it seems to be an important one. Is there a CSS property to prevent this behavior or do I have to look elsewhere?

edit: I use Flex 3 and Halo/MX components

Answer 1

The combobox component contains an inner TextInput. You have to extend the ComboBox class and modify the height of the textinput to what you need.

For example, lets say you put a font size of 20 and this extended class:

public class MyCb extends ComboBox
    {
        public function MyCb()
        {
            addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);          
        }

        private function onCreationComplete(e:Event):void {
            this.textInput.height = 40;
        }
    }

Main application:

<mx:VBox width="100%" height="100%">    
    <mx:ComboBox fontSize="20" >
        <mx:dataProvider>
            <mx:Object label="goubigoulba"/>
            <mx:Object label="goubigoulba"/>
        </mx:dataProvider>
    </mx:ComboBox>

    <local:MyCb fontSize="20"   >
        <local:dataProvider>
            <mx:Object label="goubigoulba"/>
            <mx:Object label="goubigoulba"/>        
        </local:dataProvider>       
    </local:MyCb>   
</mx:VBox>

You will get the following result: