3 Replies Latest reply: Oct 27, 2011 2:51 AM by Anonymous2008 RSS

    How can I layout out 3 labels horizontally, so they appear one after another in multiple lines

    cccccc1980 Community Member

      I have 3 labels in a container, I would like them appear one after another (make them like spans to the html, inline display), especially when the length of question label is very long and will need to occupy multiple lines.

       

      following codes will have the effects appeared in the first image, and I would like them to look like the second image,
      First Image:

      worng.jpg

      Second Image:

      right.jpg

      is there any ways to make it, it is simple task in html, but I could not fount out a solution for it.

       

      thanks in advanced.


      Below is the sample codes in Flex 4.5

       

       

      <HGroup>

      <s:Label text="Q1." styleName="qNum" />

      <s:Label text="This question label is very long. sdfsldfjs sd flsjd flsjdfsdfljs dfojhikljsflksjdf  sldjfiosdjfosjdflsjdfl io3iweieirofsdjlsd fls jdfosdifjos dfljsdfs"  styleName="qLabel" />

      <s:Label text="*"  styleName="qRequired" />

      </HGroup>

        • 1. Re: How can I layout out 3 labels horizontally, so they appear one after another in multiple lines
          Anonymous2008

          Pardon the formatting issues, this is through email.

           

          Combining a question out of 3 labels seems a little trouble some. Here is a slightly modified version of yours.

           

          <s:HGroup width="100%" horizontalAlign="left" gap="0">

             <s:Label text="Q1." styleName="qNum" />

             <s:Label text="This question label is very long. sdfsldfjs sd flsjd flsjdfsdfljs dfojhikljsflksjdf  sldjfiosdjfosjdflsjdfl io3iweieirofsdjlsd fls jdfosdifjos dfljsdfs"  styleName="qLabel" />

             <s:Label text="*"  styleName="qRequired" />

          </s:HGroup>

           

           

          Or maybe run together into one label...  the newer TLF components can use the textFlow property to set formatted text. Such as a s:RichText instead of a label.

           

           

          <fx:Script>

             public sQuestion = " This question label is very long. sdfsldfjs sd flsjd";

             public nQuestionNumber:int = 1;

          </fx:Script>

           

          <s:Label text="Q. *" /

          • 2. Re: How can I layout out 3 labels horizontally, so they appear one after another in multiple lines
            cccccc1980 Community Member

            Pardon the formatting issues, this is through email.

             

            Combining a question out of 3 labels seems a little trouble some. Here is a slightly modified version of yours.

             

            <s:HGroup width="100%" horizontalAlign="left" gap="0">

               <s:Label text="Q1." styleName="qNum" />

               <s:Label text="This question label is very long. sdfsldfjs sd flsjd flsjdfsdfljs dfojhikljsflksjdf  sldjfiosdjfosjdflsjdfl io3iweieirofsdjlsd fls jdfosdifjos dfljsdfs"  styleName="qLabel" />

               <s:Label text="*"  styleName="qRequired" />

            </s:HGroup>
            RE: This  modifition does not work

            Or maybe run together into one label...  the newer TLF components can use the textFlow property to set formatted text. Such as a s:RichText instead of a label.


            Re: TextFlow is not supported by Mobile devices

             

            <fx:Script>

               public sQuestion = " This question label is very long. sdfsldfjs sd flsjd";

               public nQuestionNumber:int = 1;

            </fx:Script>

             

            <s:Label text="Q.  *" /
            RE: seems this suggestio nis not fully complete, can you please provide me the full details?

             

            Thanks

            • 3. Re: How can I layout out 3 labels horizontally, so they appear one after another in multiple lines
              Anonymous2008 Community Member

              I hope it's not being stripped from my email replies.  What is had was curly brackets with the variables inside it.  So in the text quotes it said "Q[curlybracketopen] nQuestionNumber[curlybracketclose]. sQuestion[curlybracketclose] *". This would have combined the questions formatting using one label and some binding.

               

               

              <fx:Script>

                 public sQuestion = " This question label is very long. sdfsldfjs sd flsjd";

                 public nQuestionNumber:int = 1;

              </fx:Script>

               

              <s:Label text="Q. *" />

               

              Hope this one got through,