6 Replies Latest reply on Jun 3, 2011 6:29 AM by deyan none

    MX and Spark Labels get wider than parent container

    deyan none

      Hi there,

       

      Labels in flex have pretty odd behaviour when dealing with long text. Here is an example:

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                     xmlns:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx"

                     minWidth="955" minHeight="600">

       

          <fx:Script>

              <![CDATA[

                  [Bindable]

                  private var text : String;

       

                  private function setText() : void {

                      text = "XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX";

       

       

       

                      label2.text = "Label 1 width: " + label.width;

                  }

       

       

              ]]>

          </fx:Script>

       

          <s:Panel width="200" >

              <s:VGroup>

       

                  <mx:Label id="label" text="{text}" truncateToFit="true" />

       

                  <s:Button click="setText()" label="Set text" />

                  <mx:Label id="label2" />

              </s:VGroup>       

       

          </s:Panel>

       

      </s:Application>

       

      screenshot.png

       

       

      My beliefs are that the label should not be wider than its parent container - which is 200 px.

      In this case the truncateToFit parameter plays no role at all !

       

      Is this a bug or a feature ? It works for both MX and Spark labels

        • 1. Re: MX and Spark Labels get wider than parent container
          _spoboyle Level 4

          parent containers resize to fit their children set the labels width to 100% (or perhaps maxWidth to 100% I haven't tried this)

          • 2. Re: MX and Spark Labels get wider than parent container
            deyan none Level 1

            Actually no.

             

            As seen on the screenshot in my post - the parent container ( a Panel ) does not resize. The label goes out of its container.

             

            Also maxWidth can not be set to a percentage value , it accepts only numbers.

            • 3. Re: MX and Spark Labels get wider than parent container
              _spoboyle Level 4

              this works for me using spark labels

               

                   <fx:Script>
                        <![CDATA[
                             [Bindable]
                             private var text : String;
                             
                             private function setText() : void {
                                  
                                  text = "XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX";                    
                                  label2.text = "Label 1 width: " + label.width;
                             }
                        ]]>
                        
                   </fx:Script>
                   
                   <s:Panel width="200" >     
                        <s:VGroup width="100%">
                             <s:Label id="label" text="{text}" maxDisplayedLines="1" width="100%"/>
                             <s:Button click="setText()" label="Set text" />
                             <s:Label id="label2" />
                        </s:VGroup>       
                   </s:Panel>
              
              1 person found this helpful
              • 4. Re: MX and Spark Labels get wider than parent container
                deyan none Level 1

                Yes, spark label seems to work.

                Now if there was an easy way to make it selectable ...

                 

                10x for the hint

                • 5. Re: MX and Spark Labels get wider than parent container
                  _spoboyle Level 4

                  You cannot make a Label selectable without subclassing it

                   

                  Flex docs suggest using RichEditableText (however this cannot be truncated with the ...)

                   

                  I have this solution which simply restricts the RichEditableText to 1 line without ...

                   

                       <fx:Script>
                            <![CDATA[
                                 [Bindable]
                                 private var text : String;
                                 
                                 private function setText() : void {
                                      
                                      text = "XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX";                    
                                      label2.text = "Label 1 width: " + label.width;
                                 }
                            ]]>
                            
                       </fx:Script>
                       
                       <s:Panel width="200" >     
                            <s:VGroup width="100%">
                                 <s:RichEditableText id="label" text="{text}" width="100%" heightInLines="1" editable="false" selectable="true"/>
                                 <s:Button click="setText()" label="Set text" />
                                 <s:Label id="label2" />
                            </s:VGroup>       
                       </s:Panel>
                  

                   

                  if that's not good enough you can use this subclass of TextInput in place of the RichEditableText

                   

                  http://sharathchandra.wordpress.com/2010/12/23/truncated-textinput-flex-4/

                   

                  which will allow selection like i have above with the trunaction

                  1 person found this helpful
                  • 6. Re: MX and Spark Labels get wider than parent container
                    deyan none Level 1

                    Yes, RichEditableText was also my best guess

                    Another option was spark TextArea, editable=false and contentBackgroundAlpha=0 .

                     

                    10x for the help