7 Replies Latest reply on Nov 15, 2012 12:40 PM by resdesign

    make symbol width equal to dynamically added content

    David M.

      Hey everyone,

       

      I have a nav menu with 4 instances of a toggle button symbol that contains a text element name "label". After compositionReady I'm iterating over each instance and changing the "label" to another value that I load from an array. I'm able the swap out the names easy enough using .each() but am having trouble figuring out how to change the width of the symbol to the width of the text content so they don't overlap.

       

      Any suggestions? Thanks,

      Dave

        • 1. Re: make symbol width equal to dynamically added content
          TimJaramillo Level 4

          Hi David,

           

          In the example below, I'm getting the width of the textfield, then making the grey box underneath match that width.

           

          example:

          www.timjaramillo.com/code/edge/width/test.html

           

          source:

          www.timjaramillo.com/code/edge/_source/width.zip

           

           

          Code on Stage.compositionReady:

             

          sym.navTextWidth;

          sym.btnMargin = 30;

           

          // called by trigger at 0ms 

          sym.init = function() {

                    // get width of text

                    sym.navTextWidth = sym.getSymbol("navItem").$("navText").width();

                    // set width of button

                    sym.getSymbol("navItem").$("navBtn").width(sym.navTextWidth+sym.btnMargin);

          }

          • 2. Re: make symbol width equal to dynamically added content
            David M. Level 1

            Hi Tim,

             

            Thanks for the help. The code you shared works, if I have my elements on the stage already, but I'm adding the menu buttons and applying a label dynamically. So the problem I have is that the labels will eventually be loaded from a database and I have no way of know how long each label may be. Currently I have not figured out how to change the width of my label to the width of the text content.

             

            Here is the code at compositionReady:

             

            var labels = ["LABEL1", "LONG LABEL2", "LONGER LABEL3", "LABEL4"];

            for(var i = 0; i < labels.length; i++){

                      var new_sym = sym.createChildSymbol("toggle_btn","menu");

                      console.log("menu button " + i + " added");

                      new_sym.$("label").html(labels[i]);

                      var symWidth = new_sym.$("label").width();

                      new_sym.getSymbolElement().css({'display':'inline-block',

                                                                                                                                    'margin-left':'20px',

                                                                                                                                    'white-space':'nowrap',

                                                                                                                                    });

                      new_sym.getSymbolElement().width(symWidth);

             

            }

             

            Any more thoughts?

             

            here is a link to zip folder of the file if it helps:

            https://www.dropbox.com/s/2ttf5ipm7x5arfb/Test1.zip

             

            Thanks!

            -David

            • 3. Re: make symbol width equal to dynamically added content
              TimJaramillo Level 4

              Hey David,

               

              So far, I haven't been able to find a way to get the dynamic text width size, unless I also manually set the css width of the text:

               

              new_sym.$("label").css({"width":200});

               

              There has got to be a way to get the new width of a textfield after setting dynamic text for the textfield. I'll keep looking around, and perhaps some of the other kind forum folk will be able to chime in.

               

              One hack would be to count how many characters are in your string, and manually set the css width based off that, but that is yucky:

               

              var myLength = labels[i].length;

              new_sym.$("label").css({"width":myLength*10});

              • 4. Re: make symbol width equal to dynamically added content
                David M. Level 1

                Thanks for continuing to look in to this Tim. I might have to change the

                layout so the width isn't an issue. I suppose the problem at hand is

                because of the way Edge positions elements they are out of normal document

                flow which is causing the overlap. Or the other thing I thought is because

                Edge gives the element a width it doesn't change after updating the text

                dynamically. I tried clearing the width thru CSS before changing the text,

                which does log different values for the width, but not the correct widths.

                 

                Thanks again for the help.

                • 6. Re: make symbol width equal to dynamically added content
                  David M. Level 1

                  I got it!

                   

                  resdesign, thank you for the link. I tried adding a <span> tag around the label text as the link suggested - which worked - but I found that for some reason it was adding in the width of the symbol plus the width of the text element child. So I changed the css width property of the symbol to 'auto' and it worked like a charm... didn't even need the <span> tags anymore - which will keep it tidier.

                   

                  Thanks again for the input. I believe the members of this forum are the most helpful of any forum I've ever been apart of.

                   

                  Here is the final code:

                   

                  var labels = ["LABEL", "A LONG LABEL", "A REALLY LONG LABEL", "LBL"];

                  var xPos = 400;

                  for(var i = 0; i < labels.length; i++){

                            var newBtn = sym.createChildSymbol( "toggle_btn" , "navBar" );

                            //var btnLabel = "<span>" + labels[i] + "</span>";

                            //newBtn.$( "label" ).html( btnLabel );

                            newBtn.$( "label" ).html( labels[i] );

                            newBtn.getSymbolElement().css({

                                                                                                                                'display' : 'inline-block',

                                                                                                                                'white-space' : 'nowrap',

                                                                                                                                'left' : xPos,

                                                                                                                                'width' : 'auto',

                                                                                                                                'top' : 10

                                                                                                                                });

                            console.log( "menu button " + i + " added at " + xPos + "px" );

                            xPos += (newBtn.$("label").width() + 20);

                  }

                   

                  And a link to the zipped files:

                  https://www.dropbox.com/s/5n2hj5kppp6wdky/Test3.zip

                   

                  Many thanks!

                  David

                  • 7. Re: make symbol width equal to dynamically added content
                    resdesign Adobe Community Professional & MVP

                    Very good. Glad I could point you to the right place!