1

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):
truncated g

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

blahdiblah
  • 33,069
  • 21
  • 98
  • 152
jeremy-george
  • 1,171
  • 1
  • 9
  • 20

2 Answers2

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:

enter image description here

Davz
  • 1,530
  • 11
  • 24
0

I believe that this is not the Comobox itself, but its internal label. You can try setting paddingBottom, to see if the label will inherit that, but you might have better luck creating your own subClass of label and using it as the textFieldClass.

Amy Blankenship
  • 6,485
  • 2
  • 22
  • 45
  • It seems a bit like overkill for something that may be needed frequently... I still don't understand why I cannot find reference to this problem elsewhere since it really impacts the final look of the GUI. – jeremy-george Aug 25 '11 at 13:58
  • If you get into Robotlegs, it's very common there to create an extension of a Class to serve as a marker to say "I want to deal with these instances of the Class differently." In your case, you'd just creat a MyLabel extends Label Class and then create special css for MyLabel. About 2 minutes of work... 2 minutes of work isn't overkill in my world :) – Amy Blankenship Aug 25 '11 at 14:03
  • I managed to extend the Label class and set its style with CSS, and defined it as the combobox' itemrenderer. However it only affects the dropdown items, how can I use my class as the renderer of the selected field? – jeremy-george Aug 25 '11 at 14:23
  • Sorry, I'd have to dig into Combobox to see the specifics, and I have some things I need to do before I will have time for that (if at all). – Amy Blankenship Aug 25 '11 at 15:17