topic Re: Resize About Window in ArcGIS Web AppBuilder Questions

Resize About Window

MichelleD — Fri, 06 Mar 2020 21:37:24 GMT

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?

Re: Resize About Window

RobertScheitlin__GISP — Tue, 10 Mar 2020 12:42:17 GMT

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)?

Re: Resize About Window

MichelleD — Tue, 10 Mar 2020 13:12:47 GMT

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.

Re: Resize About Window

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:41:50 GMT

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
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Resize About Window

MichelleD — Wed, 11 Mar 2020 20:48:04 GMT

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!