4 Replies Latest reply on Oct 1, 2010 2:15 PM by Flex harUI

    mx:Text won't fill entire horizontal space when width="100%"

    JoshBeall Level 1

      Hi All,

       

      I've got a component (code at bottom of this post).  I'm displaying the component using this code:

       

       

           protected function instructionsButton_clickHandler(event:MouseEvent):void
           {
                if(this.instructionsDialog == null)
                     this.instructionsDialog = new InstructionsDialog();
                PopUpManager.addPopUp(this.instructionsDialog,this,true);
                PopUpManager.centerPopUp(this.instructionsDialog);
           }
      

       

      Now, when I first pull up the component everything is fine.  However, if I close the component and then display it again, the mx:Text components aren't taking up the entire horizontal width on the canvas, even though I've got them set to 100%, and it works the first time it's display.

       

      It's being removed by callling PopUpManager.removePopUp(this) when the close event is fired on the TitleWindow (which has an "X" in the upper right).

       

      Here's a video demonstrating:

      http://www.screencast.com/t/ZTBmODExODQ

       

      Here's the component MXML

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="400">
           
           <fx:Script>
                <![CDATA[
                     import mx.events.CloseEvent;
                     import mx.managers.PopUpManager;
                     
                     protected function mainTitleWindow_closeHandler(event:CloseEvent):void
                     {
                          PopUpManager.removePopUp(this);
                     }
                     
                ]]>
           </fx:Script>
           <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) here -->
           </fx:Declarations>
           <s:TitleWindow left="0" top="0" right="0" bottom="0" id='mainTitleWindow'
                             close="mainTitleWindow_closeHandler(event)" title="Instructions">
                <mx:Accordion id="accordion" color="0x323232" width="100%" height="100%">
                     <!-- Define each panel using a VBox container. -->
                     <s:NavigatorContent label="Header 1">
                          <mx:Text width="100%">
                               <mx:text>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a magna non urna ultrices facilisis. Aenean venenatis volutpat enim eget vehicula. Suspendisse eu diam tortor, sed tincidunt augue. Vestibulum interdum sem eget dui suscipit rutrum. In hac habitasse platea dictumst. Fusce ullamcorper ipsum sed elit tempor eget interdum ipsum tempus. Nulla convallis eleifend mattis. Donec nec hendrerit dui. Vivamus nec urna eget lectus gravida porttitor quis ut lacus. Fusce rutrum, justo a vestibulum tempus, eros tellus vestibulum sem, laoreet consequat lectus urna vitae eros. Ut pulvinar porttitor quam, ut scelerisque arcu pharetra vel. Praesent leo felis, eleifend quis tempor vitae, venenatis at erat. Donec nec risus sed enim dapibus pretium quis vitae velit. Nulla pulvinar semper magna non pulvinar. Proin dictum tristique lacus. Morbi eget urna velit. Aliquam massa dui, dapibus pretium interdum sit amet, ultrices sed lorem. Vestibulum et eros a dolor sagittis pretium at ut mauris.
                               </mx:text>
                          </mx:Text>
                     </s:NavigatorContent>
                     
                     <s:NavigatorContent label="Item 2">
                          <mx:Text width="100%">
                               <mx:text>
                                    Sed ultricies elit vel dui aliquam faucibus faucibus lacus ullamcorper. Phasellus odio est, tristique quis lacinia id, accumsan at lacus. Pellentesque consectetur, libero quis dignissim interdum, mi velit semper nunc, nec auctor metus nulla non lorem. Nunc scelerisque eros nec libero elementum pellentesque. Maecenas et dolor libero, non ornare libero. Curabitur ante nunc, eleifend eget imperdiet facilisis, venenatis nec urna. Nullam nulla magna, ultricies at vestibulum non, auctor quis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc nunc, dapibus quis posuere ut, tristique in dui. Curabitur at tincidunt turpis. Cras molestie quam nec lacus viverra fermentum. In bibendum varius augue id feugiat. Quisque id pretium turpis. Cras et velit nisi. Nunc sodales libero ut magna convallis interdum adipiscing magna vehicula. Phasellus elementum turpis vitae ipsum ultrices dictum. Aenean porttitor nibh sit amet est ullamcorper vitae rutrum dolor molestie.
                               </mx:text>
                          </mx:Text>
                     </s:NavigatorContent>
                     
                     <s:NavigatorContent label="Item 3">
                          <mx:Text width="100%">
                               <mx:text>
                                    Quisque cursus posuere porttitor. Mauris eros eros, sagittis et ultricies vitae, scelerisque ac neque. Integer vel diam id nisl lacinia auctor ac quis orci. Quisque consectetur elementum orci. Etiam mollis dui id urna commodo vel porta neque tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur odio urna, tincidunt in volutpat ut, lobortis nec quam. Integer et est at ante pharetra dapibus. Mauris tempus laoreet euismod. Nunc luctus tincidunt augue, quis iaculis mauris scelerisque nec. Nulla laoreet viverra ipsum, vitae gravida arcu pharetra nec. In rutrum ligula ut massa egestas in varius tortor suscipit. Cras posuere nibh ligula.
                               </mx:text>
                          </mx:Text>
                     </s:NavigatorContent>
                     <s:NavigatorContent label="Item 4" >
                          <mx:Text width="100%">
                               <mx:text>
                                    Duis urna libero, suscipit ut laoreet a, consequat sit amet tortor. Vestibulum accumsan purus viverra mauris fermentum elementum. Vivamus quis lacus mi, quis mollis mauris. Praesent interdum ornare nulla eget scelerisque. Etiam et nibh metus. Vivamus ante tellus, gravida accumsan congue vel, commodo vel nibh. Maecenas placerat pellentesque blandit. Nunc nec faucibus quam. Fusce facilisis risus non nisi blandit eget commodo eros vehicula. Proin pharetra, tellus vel ultrices rutrum, metus libero pulvinar felis, non vulputate orci sem vitae dui. Proin sodales, purus vitae aliquam ultrices, elit mi rhoncus tellus, at dictum magna quam non massa. Phasellus tincidunt augue ut urna scelerisque in posuere mi vulputate. Ut porttitor, ipsum non ornare laoreet, augue tortor imperdiet turpis, sit amet blandit arcu turpis eu leo. Vivamus fringilla, nulla quis porta placerat, ante augue pellentesque leo, in mattis felis ante ac dui.
                               </mx:text>
                          </mx:Text>
                     </s:NavigatorContent>
                     <s:NavigatorContent label="Item 5" >
                          <mx:Text width="100%">
                               <mx:text>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget diam ipsum, nec malesuada elit. Mauris in placerat lectus. Quisque nec nulla elit. Donec ultrices turpis ac magna accumsan commodo. Aliquam blandit libero sed massa pulvinar eu aliquam ante feugiat. Pellentesque odio velit, ullamcorper posuere tristique et, pretium at enim. Curabitur vulputate metus a eros elementum pulvinar. Curabitur augue tellus, dignissim quis sodales ut, gravida in dolor. Suspendisse consectetur, neque eget iaculis feugiat, dui turpis fermentum enim, sit amet mattis leo elit a felis.
                               </mx:text>
                          </mx:Text>
                     </s:NavigatorContent>
                     <s:NavigatorContent label="Questions?" >
                          <mx:Text width='100%' textAlign="left">
                               <mx:htmlText><![CDATA[<div style='text-align: left;'><a href='mailto:test@test.org'>Email <u>test@test.org</u></a></div>]]></mx:htmlText>
                          </mx:Text>
                     </s:NavigatorContent>
                </mx:Accordion>
           </s:TitleWindow>
      </s:SkinnableContainer>
      
       
      

        • 1. Re: mx:Text won't fill entire horizontal space when width="100%"
          Pappa_John Level 1

          Does it help if instead of setting the width of the text component, you set the left/right

          constraints?


          • 2. Re: mx:Text won't fill entire horizontal space when width="100%"
            JoshBeall Level 1

            Pappa_John wrote:

             

            Does it help if instead of setting the width of the text component, you set the left/right

            constraints?

            I tried that, and it results in a different problem--now the text won't wrap.  So you can only see the first line of text, and everything else is outside (off the right side) of the component's rendering box.

             

            Good idea, though--it was worth a try.

             

            Here's how I set the constraints, btw:

             

                 <mx:Text left="0" top="0" right="0" bottom="0">
                      <mx:text>
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a nulla tellus, nec interdum mauris. Vestibulum blandit, diam quis rutrum dignissim, urna elit pulvinar enim, eget adipiscing nisl diam vitae ipsum. Etiam pellentesque turpis ac erat ultrices vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ac sapien eu nisl egestas egestas ac a libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce eget metus metus, vel ornare felis. Nullam sed tristique leo. Nulla ultricies pulvinar tortor ut lobortis. Sed tellus diam, ornare molestie viverra ac, fermentum et nulla. Curabitur odio diam, sodales eu malesuada eget, rutrum nec eros. Curabitur ac felis a mauris vestibulum pulvinar. Praesent lacinia ultricies mauris, vitae varius purus convallis et. Proin molestie lobortis arcu, sed dapibus odio hendrerit sit amet.
                      </mx:text>
                 </mx:Text>
            

            • 3. Re: mx:Text won't fill entire horizontal space when width="100%"
              Pappa_John Level 1

              One last stab in the dark ...

               

              How about a TextArea with the constraints set and wordWrap=true?