7 Replies Latest reply on Aug 6, 2016 9:28 AM by Pickory

    Problem with alignment in SUI

    myDavey Level 1


      I am creating a dialog using SUI and I am having a problem aligning the controls how I would like

      I have a checkbox and a dropdownlist

      I would like the checkbox to be aligned left, and the dropdownlist on the next line indented a little




      Here is my code:

      var g2 = w.add('group');   
          g2.orientation = "column";
          g2.alignment = "left";
          var applyObjSty = g2.add("checkbox", undefined, "Apply Object Style");
              applyObjSty.alignment = "left"
          var ObjStyDrop=g2.add("dropdownlist", [0,0,200,20], objStyList);
              ObjStyDrop.alignment = "center";


      I also tried by setting the bounds, like this:

          var ObjStyDrop=g2.add("dropdownlist", [50,0,250,20], objStyList);



      However, no matter what I do, they are both being justified to the left



      If anyone can show me how to set this up, I would appreciate it



        • 1. Re: Problem with alignment in SUI
          Jump_Over Level 5



          General rule is each SUI object has bounds to specify or not.

          If not ("undefined") - it is flexible solution and Layout Manager cares about while creation proccess.

          If yes - you should care but it always works regarding to parent. So if parent is under Layout Manager control - you loose x,y control but still have width, height control.

          I your case ==> specify g2 bounds instead od "undefined", like:

          var g2 = w.add("group", [0,0, 220, 70]);
          g2.orientation = "column"; 
          g2.alignment = "left"; 
          var applyObjSty = g2.add("checkbox", [10,10,150,25], "Apply Object Style"); 
          var ObjStyDrop=g2.add("dropdownlist", [30,30,200,20], objStyList);


          However be awared that each modification need more and more places to edit across your code



          • 2. Re: Problem with alignment in SUI
            myDavey Level 1

            Thanks Jarek

            I understand

            And, yes it seems like I would have to begin changing a lot of this coding! - not something I would want to do!!


            Is there any way to do it using alignment as I tried in my first example?

            Why is the alignment method not working?

            Is alignment controlled totally by the parent?





            • 3. Re: Problem with alignment in SUI
              Jump_Over Level 5



              The reason is Layout Manager still.

              Imagine how it works and which "decision" can be made while building parent object and its children.

              A group g2 should be as big as bigest child (g2 bounds unspecified) so there is no space to left-center-right align inside this parent.


              Maybe I am not exactly right but that's how I read it so far.



              • 4. Re: Problem with alignment in SUI
                myDavey Level 1

                I think I see what you mean

                I will do some more testing with / without groups to try to clarify this


                Thanks for the help!


                • 5. Re: Problem with alignment in SUI
                  TᴀW Adobe Community Professional & MVP

                  Hi David,


                  Normally one would want to keep the automatic Layout Manager working, so as to reduce the number of changes you'd need to make as the dialog gets more complicated, as mentioned above.


                  So, a nice way to do that is to use the Windows onShow event to slight tweak positioning as needed. That way, the layout manager gets to do its thing, and then we adjust a little as needed. For instance, in your example, I would do it like this:

                  objStyList = ["ay", "bee", "see"];
                  with (w = new Window("palette")){
                   with (add("panel")){
                    orientation = "column";
                    alignChildren = ["left", "full"];
                    var a = add("checkbox", undefined, "Apply Object Style");
                    var b = add("dropdownlist", undefined, objStyList);
                    b.minimumSize.width = 200;
                  w.onShow = function(){
                   b.bounds.left = a.bounds.left + 15;


                  That simply nudges the dropdown 15 pixels to the right, relative to the checkbox, after the layout manager has had a go first! So even if you move your checkbox around as the UI progresses, the dropdown will always be 15 pixels to its right! And we've avoided altogether setting fixed bounds for anything.

                  1 person found this helpful
                  • 6. Re: Problem with alignment in SUI
                    myDavey Level 1

                    Hi Ariel

                    That was great!

                    Exactly what I needed - worked perfectly

                    Thanks a lot!


                    • 7. Re: Problem with alignment in SUI
                      Pickory Level 3

                      Thats a very handy trick. Thanks.