1 Reply Latest reply on Jul 27, 2014 9:13 PM by jeremylcox

    change UI layout based on panel size

    jeremylcox

      I am looking for a way to adjust the layout of my UI based on the panel's size. For example, two buttons that are above each other until the window height gets small enough that they need to be next to each other instead.

       

      Another example would be a series of buttons that are displayed as a row if the panel is wider than it is tall, or as a column if it is taller than it is wide.

       

      Anyone done anything like this, or know if it is possible? As I see it, all I need is a way to read the panel's current size and I can put a function into onResize/onResizing that adjusts the UI layout.

        • 1. Re: change UI layout based on panel size
          jeremylcox Level 1

          Figured it out!

           

          This changes my row of buttons from a column to row based on the window ratio. Finally figured out windowBounds.height and windowBounds.width.

           

          myPanel.onResizing = myPanel.onResize = function () {
            if (myPanel.windowBounds.height > myPanel.windowBounds.width){
                 myPanel.grp.cmds.orientation = "column";
            } else {
                 myPanel.grp.cmds.orientation = "row";
            }
            this.layout.resize();
          }