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 Level 1

      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