15 Replies Latest reply on Jul 14, 2007 4:00 AM by doug777

    What causes the space between Text controls?

    doug777 Level 1
      If I have two text controls in a container, why is there a large vertical gap between the controls?

      And if the second line wraps, why does the space get bigger?

      Is there a way to eliminate this unwanted space?

      Example:

      <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*" creationComplete = "initApp()">
      <mx:Script>
      <![CDATA[

      import mx.containers.Tile;
      import mx.controls.Text;

      public function initApp():void{
      var ti:Tile = new Tile();
      ti.height = 90;
      ti.width = 90;
      ti.direction = "vertical";
      ti.setStyle("borderStyle", "solid");
      ti.setStyle("cornerRadius", "10");
      var ti2:Tile = new Tile();
      ti2.height = 90;
      ti2.width = 90;
      ti2.direction = "vertical";
      ti2.setStyle("borderStyle", "solid");
      ti2.setStyle("cornerRadius", "10");
      var ti3:Tile = new Tile();
      ti3.height = 90;
      ti3.width = 90;
      ti3.direction = "vertical";
      ti3.setStyle("borderStyle", "solid");
      ti3.setStyle("cornerRadius", "10");
      var txt1:Text = new Text();
      var txt2:Text = new Text();
      var txt12:Text = new Text();
      var txt22:Text = new Text();
      var txt3:Text = new Text();
      txt1.text = "TILE 1";
      txt2.text = "TILE 2";
      txt3.text = "This shows how many lines of text will fit in one tile and fills all the lines.";
      txt1.setStyle("fontWeight", "bold");
      txt1.setStyle("textAlign", "center");
      txt2.setStyle("fontWeight", "bold");
      txt2.setStyle("textAlign", "center");
      txt12.text = "Hello";
      txt22.text = "Hello To You And Yours";
      txt1.width = 85;
      txt2.width = 85;
      txt12.width = 85;
      txt22.width = 85;
      txt3.width = 85;
      txt12.setStyle("textAlign", "center");
      txt22.setStyle("textAlign", "center");
      ti.addChild(txt1);
      ti.addChild(txt12);
      ti2.addChild(txt2);
      ti2.addChild(txt22);
      ti3.addChild(txt3);
      pan.addChild(ti);
      pan.addChild(ti2);
      pan.addChild(ti3);
      }

      ]]>
      </mx:Script>

      <mx:Panel id="pan" width="450" height="300" layout="horizontal"/>
      </mx:Application>

      Doug
        • 1. Re: What causes the space between Text controls?
          JabbyPandaUA Level 3
          Use verticalGap=0 attribute on containers.
          • 2. Re: What causes the space between Text controls?
            doug777 Level 1
            Well, I tried setStyle("verticalGap", "0") on ti and ti2 immediately after the cornerRadius lines and it had no effect as you can see if you try it.

            Doug
            • 3. Re: What causes the space between Text controls?
              JabbyPandaUA Level 3
              verticalGap is not a style, is a property.

              Set is like this myContainter.verticalGap = 0 or
              <mx:Canvas verticalGap="0" />
              • 4. Re: What causes the space between Text controls?
                doug777 Level 1
                Then how come it's shown in the Styles in the Tile Class and not in the Properties?
                • 5. Re: What causes the space between Text controls?
                  doug777 Level 1
                  It works in mxml, but I can't find any way to do it in ActionScript. ti.verticalGap won't compile.

                  Doug
                  • 6. Re: What causes the space between Text controls?
                    doug777 Level 1
                    When I say it works in mxml, I mean that it compiles if I set it in the Panel container in my example, it doesn't actually change the line spacing in the Tile containers.

                    In fact I can live with the 6px vertical gap, but I can't accept the 12px gap that you see in Tile 2, when the text wraps.

                    Is there any way to stop this happening?

                    Doug
                    • 7. Re: What causes the space between Text controls?
                      JabbyPandaUA Level 3
                      Because you witness verticalGap margin between your tiles, you have to adjust verticalGap property on a parent container for tiles.

                      In your sample it's mx:Panel

                      <mx:Panel id="pan" width="450" height="300" layout="horizontal" verticalGap="0" horizontalGap="0"/>
                      • 8. Re: What causes the space between Text controls?
                        doug777 Level 1
                        Yes this adjusts the gap between the tiles, but I don't want to adjust the gap between the tiles.

                        As I've said from the beginning I want to adjust the gap between the children of the tile container, which are Text controls.

                        So far nothing you've suggested has any effect on this.

                        And why does the vertical gap get added twice when the text in the Text control wraps?

                        Doug
                        • 9. Re: What causes the space between Text controls?
                          JabbyPandaUA Level 3
                          I am sorry, I was not paying enough attention to your original post.

                          I examined your code, examined the code of mx.containers.Tile (always study the source code of underlying frameworks classes to understand it's behaviour!)

                          In updateDisplayList Tile's class routine I learned that Tile container supports "horizontalGap" and "verticalGap" as STYLES, I was wrong.

                          Correct statement:
                          verticalGap is a style, not a property

                          If you create Tile componets via ActionScript, try the following, works for me:

                          var ti:Tile = new Tile();
                          ti.verticalLineScrollSize
                          ti.setStyle("horizontalGap", 0);
                          ti.setStyle("verticalGap", 0);
                          • 10. Re: What causes the space between Text controls?
                            doug777 Level 1
                            If you try this in my code, you'll see that it doesn't work.

                            I'm guessing that this is because when the Text controls are added, the updateDisplayList function in the Tile class is called again and the verticalGap is reset to the default.

                            When the text wraps it is called twice which causes the effect you see in my example.

                            It is this double addition of the vertical gap that is the real problem.

                            I don't really need to set the vertical gap to 0, I just need to stop this double size gap when the text in the text control wraps.

                            How can I do that?

                            Please run my example to see the problem.

                            Doug
                            • 11. Re: What causes the space between Text controls?
                              JabbyPandaUA Level 3
                              You are right again!

                              The problem is not with containers (Tile, Panel), but with a correct sizing of Text component.

                              Try this piece of code, notice that I set explicitly the width attribute of each Text component to 100%

                              <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*"
                              creationComplete = "initApp()">
                              <mx:Script>
                              <![CDATA[
                              import mx.containers.VBox;
                              import mx.controls.TextArea;

                              import mx.containers.Tile;
                              import mx.controls.Text;

                              public function initApp():void{

                              txt1.text = "Hello To You And Yours Hello To You And Yours Hello To You And Yours Hello To You And Yours Hello To You And Yours Hello To You And Yours Hello To You And Yours Hello To You And Yours END";
                              txt2.text = "Hello To You And Yours END";

                              }

                              ]]>
                              </mx:Script>

                              <mx:Panel id="pan"
                              width="450" height="300"
                              layout="horizontal" verticalGap="0" horizontalGap="0">

                              <mx:VBox id="myBox" width="100%" height="100%" verticalGap="0" horizontalGap="0">
                              <mx:Text selectable="false" id="txt1" width="100%"/>
                              <mx:Text selectable="false" id="txt2" width="100%"/>
                              </mx:VBox>
                              </mx:Panel>
                              </mx:Application>
                              • 12. Re: What causes the space between Text controls?
                                doug777 Level 1
                                But your text is inside a VBox, not inside a Tile.

                                Once you put a Text control with percentWidth = 100 inside a Tile with a specific width, the text simply no longer wraps though theoretically it should.

                                (I have to set the width of the tiles otherwise they end up different sizes depending on the width of the text in each one.)

                                I have used a Text control rather than a Label control, so that I can wrap the text into the Tile container.

                                The question is how to stop the verticalGap being added twice when the text wraps ??

                                Doug
                                • 13. Re: What causes the space between Text controls?
                                  doug777 Level 1
                                  On further testing I have found various ways to force the text to wrap even when the Text control's percentWidth is set to 100.

                                  However, no matter what you do, whenever text wraps an additional verticalGap is added above that control.

                                  For example, if the text in the control wraps into three lines, the gap above the control is 18px; if four lines it's 24px and so on.

                                  I think the Tile control has two program errors:

                                  1. A locally set verticalGap style, is overridden by the default verticalGap style when Tile's updateDisplayList is called.

                                  2. If not the first control in the Tile, a Text control that has wrapping text calls Tile's updateDisplayList for each wrap and the default verticalGap is added on each call.

                                  Doug
                                  • 14. Re: What causes the space between Text controls?
                                    JabbyPandaUA Level 3
                                    Do you have any specific reasons to favour a Tile container over VBox container?

                                    Tile container may have some illogical error in its layout routine, no doubt, but to hunt this down, a closer examination of source code of Tile container is needed.

                                    So far I've never relied on Tile container in my projects, thus I am not a expert in using Tile container, sorry.
                                    • 15. Re: What causes the space between Text controls?
                                      doug777 Level 1
                                      What a good idea !!!

                                      Changed to VBox and everything works perfectly.

                                      Thanks so much for all your help and patience.

                                      Doug