Resize About Window

734
4
Jump to solution
03-06-2020 01:37 PM
MichelleD
New Contributor III

We have been resizing the About window in a couple of our applications by adding height: 390px !important; to widgets\About\css\style.css (solution given here https://community.esri.com/thread/159363 and here https://community.esri.com/message/629811).  In WAB 2.15 this still resizes the window, but it doesn't open at the top under the widget, it opens low - about halfway down the map window.  Is there a way to make it stay aligned to the top using this method to resize, or is there a different way to resize it that will leave it at the top?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Michelle,

   So if you use the css rule to get your height. then add this code to the onOpen function in the about widget to fix the top placement issue:

      onOpen: function(){
        this.isOpen = true;
        //resolve issue #15086 when network is so slow.
        setTimeout(lang.hitch(this, function(){
          this.isOpen = false;
        }), 50);
//Added by RJS
        var panel = this.getPanel();
        var pos = panel.position;
        delete pos.bottom;
        panel.setPosition(pos);
        panel.panelManager.normalizePanel(panel);
//End Add
      },

View solution in original post

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Emeritus

Michelle,

   What theme are you using and where do you have the about widget placed (i.e. on screen widget placeholder, or in the header controller widget)?

0 Kudos
MichelleD
New Contributor III

Robert,

I am using the Foldable theme and the widget is in the header controller. I have tried changes in several places and was able to change the width in a couple different ways, but none of the changes affected the height, or if they did, the widget window opened halfway down the map window instead of under the header. The only way I was able to change the height and keep the window at the top was by increasing the “bottom” position for the widgetPool panel in the main config.json. While that works, it seems like a “backwards” way of doing it, and I am concerned that it will behave differently depending on screen size. I’d prefer to be able to set the height to 390px.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michelle,

   So if you use the css rule to get your height. then add this code to the onOpen function in the about widget to fix the top placement issue:

      onOpen: function(){
        this.isOpen = true;
        //resolve issue #15086 when network is so slow.
        setTimeout(lang.hitch(this, function(){
          this.isOpen = false;
        }), 50);
//Added by RJS
        var panel = this.getPanel();
        var pos = panel.position;
        delete pos.bottom;
        panel.setPosition(pos);
        panel.panelManager.normalizePanel(panel);
//End Add
      },
0 Kudos
MichelleD
New Contributor III

Robert,

Worked perfectly, exactly what I needed, as always.  This is the second time you have helped directly, and more times than I can count when I have found solutions you have offered others.  Thank you!

0 Kudos