6 Replies Latest reply on Sep 30, 2011 1:39 PM by darkcube

    In combobox 'g' is getting cut off, 'g' is not fully visible

    Sushantbm

      Hi Flex people,

      I am facing problem in combobox, I have the items : 'moon' , 'manager' , 'marketing' in the combobox.

      The text 'moon' is fully visible, but the in text 'manager' , 'g' is cut off, means character 'g' is not fully visible.

      Please give solution to how to make the 'g' to visible in  the selected item of combobox.

      Please find the attached snapshot, that will give clear idea.

      Thanks,

      Sushant

        • 1. Re: In combobox 'g' is getting cut off, 'g' is not fully visible
          Michael Borbor Level 4

          If you know what the data is in advanced set a fixed width to your app

          control

          • 2. Re: In combobox 'g' is getting cut off, 'g' is not fully visible
            Sushantbm Level 1

            But, increasing width, does not show the 'g' fully visible, I tried with height too, that also dint work.

            But If I make it FontSize = 10 then it works fine but more than 10 , it again does not show the character 'g' fully.

            Please can you give any other solution.

            Thanks,Sushant

            • 3. Re: In combobox 'g' is getting cut off, 'g' is not fully visible
              *Prashant Shelke* Level 4

              Try this component:


              <?xml version="1.0" encoding="utf-8"?>
              <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();" updateComplete="adjustComboDropDownWidth();"
                  buttonMode="true">
                 
                  <mx:Script>
                  <![CDATA[
                      import mx.controls.List;
                       private var _selectedValue:String;
                     
                       private var _selectedLable:String;
                       
                       private var bSelectedValueSet:Boolean = false;
                       private var bDataProviderSet:Boolean = false;
                      
                       [Bindable]
                          private var myDropdownFactory:ClassFactory;   
                       // Override committ, this may be called repeatedly
                       override protected function commitProperties():void
                       {
                          // invoke ComboBox version
                          super.commitProperties();

               

                          // If value set and have dataProvider
                          if (bSelectedValueSet && bDataProviderSet)
                          {
                             // Set flag to false so code won't be called until selectedValue is set again
                             bSelectedValueSet=false;
                             // Loop through dataProvider
                             for (var i:int=0;i<this.dataProvider.length;i++)
                             {
                                // Get this item's data
                                var item:String = this.dataProvider[i].data;
                                    
                                // Check if is selectedValue
                                if(item == _selectedValue)
                                {
                                   // Yes, set selectedIndex
                                   this.selectedIndex = i;
                                   break;
                                }
                             }
                          }
                       }

               

                       // Trap dataProvider being set
                       override public function set dataProvider(o:Object):void
                       {
                          // invoke ComboBox version
                          super.dataProvider = o;

               

                          // This may get called before dataProvider is set, so make sure not null and has entries
                          if (o!=null && o.length)
                          {
                             // Got it, set flag
                             bDataProviderSet = true;
                          }
                       }

               

                       // set for selectedValue
                       public function set selectedValue(s:String):void
                       {
                          // Set flag
                          bSelectedValueSet = true;
                          // Save value
                          _selectedValue = s;
                          // Invalidate to force commit
                          invalidateProperties();
                       }
                      
                       /**************************************************************************************** **
                        * @author       : Prashant Shelke.
                        * @date         : 17/10/07
                        * @method name : init()
                        * @i/p params  : -
                        * @return            : void
                        * @description : To show tool-tip on line items objects of combobox.
                        ***************************************************************************************** /
                        public function init():void
                        {
                              myDropdownFactory         = new ClassFactory(List);
                              myDropdownFactory.properties = {showDataTips:true, dataTipFunction:myDataTipFunction}
                              this.dropdownFactory    = myDropdownFactory;
                        }         
                       
                           private function myDataTipFunction(value:Object):String
                        {
                              return (value.label);
                        }

               

                       /**************************************************************************************** **
                         * @author       : Prashant Shelke.
                        * @date         : 17/10/07
                        * @method name : adjustComboDropDownWidth()
                        * @i/p params  : ComboBox
                        * @return         : Number
                        * @description : computes dropdown width according to what dataprovider provided to it.
                        ***************************************************************************************** /
                        private function adjustComboDropDownWidth():void
                        {
                                this.dropdownWidth    = calculateCustomPreferredSizeFromData();                  
                        }                      
                      
                       /**************************************************************************************** **
                        * @author       : Prashant Shelke.
                        * @date         : 16/10/07
                        * @method name : calculateCustomPreferredSizeFromData()
                        * @i/p params  : -
                        * @return            : Number
                        * @description : computes dropdown width according to what dataprovider provided to it.
                        ***************************************************************************************** /
                        public function calculateCustomPreferredSizeFromData():Number
                        {
                              var dropDownWidth:Number    = this.calculatePreferredSizeFromData(this.dataProvider.length).width+14;
                              if(dropDownWidth > this.width)
                              {
                                  return dropDownWidth;
                              }
                              else
                              {
                                  return this.width;
                              }
                        }
                    ]]>
                 </mx:Script>
              </mx:ComboBox>

               

               

              • 4. Re: In combobox 'g' is getting cut off, 'g' is not fully visible
                Michael Borbor Level 4

                I couldn't see your attachment because it's still queued, can you embed the

                screen capture instead?

                • 5. Re: In combobox 'g' is getting cut off, 'g' is not fully visible
                  JeffryHouser Level 4

                  Exactly what Michael said.  Attachment is still queued, so we can't see it yet.

                   

                  Is your problem in the drop down or the 'top' portion of the ComboBox?  I'm surprised to hear that changing the width doen't have any affect.

                   

                  In the FlextrasAutoCompleteComboBox we implemented a truncateToFit property, so if the item is too long for the ComboBox, it will truncate it and display a tooltip as the user rolls over.  Labels work this way by default.

                   

                   

                  http://www.flextras.com

                  • 6. Re: In combobox 'g' is getting cut off, 'g' is not fully visible
                    darkcube

                    If you override the height of the internal textInput to be the height of the combobox, it fixes the issue.  Create another class that overrides mx:ComboBox and add the following.

                     

                    override protected function updateDisplayList(unscaledWidth:Number,   unscaledHeight:Number):void

                    {

                         super.updateDisplayList(unscaledWidth, unscaledHeight); 

                        

                         // Force the text box to the unscaled height so that the bottom of letters like 'g' don't get cut off.

                         textInput.height = unscaledHeight;

                    }