topic WAB toolbar icons display over map in ArcGIS Web AppBuilder Questions

WAB toolbar icons display over map

AndrewMurdoch — Thu, 24 Mar 2016 19:50:19 GMT

Sometimes (intermittently, though frequently enough to be a problem) the toolbar icons for Web AppBuilder display directly on top of the map window (as if they are hanging down from their proper location in the top toolbar). See attached images to view how the icons SHOULD look ("good_icons_edited.png") and how the often DO look ("hanging_icons_edited.png").

We are currently using an older version of WAB (developer edition version 1.2). We have seen this behavior with "stock" WAB apps created directly through AGOL as well, though these screenshots come from a customized application.

Has anyone else seen this behavior with WAB apps? Has this been resolved in a later version of WAB? Are there any code work-arounds or suggestions for resolving this issue?

Thanks!

Andrew

Re: WAB toolbar icons display over map

RebeccaStrauch__GISP — Thu, 24 Mar 2016 20:21:38 GMT

just a very basic suggestion....does it have anything to do with the browser width? Since it happens in both AGOL and WAB developer, maybe it has more to do with the browser environment and it trying to be responsive. Also maybe use the CTRL and scroll to shrink/enlarge the text size?

Just throwing something out there to try, since I have never seen this particular behavior.

Re: WAB toolbar icons display over map

AndrewMurdoch — Thu, 24 Mar 2016 20:38:57 GMT

Thanks Rebecca,

I should also indicate that if you "resize" the browser window (after this issue occurs), the tool icons "snap back" into their proper place. So for a knowledgeable (gis geek) user, this is not a big deal, but for other less patient (real world) users, it just looks bad and unfinished.

That said, do you think this issue might be due to some "timing" issue with deferred rendering of core WAB page elements?

Any suggestions for a code work-around (short of resizing the browser window)?

Thanks,

Andrew

Re: WAB toolbar icons display over map

RobertScheitlin__GISP — Thu, 24 Mar 2016 21:20:10 GMT

Andrew,

The lead WAB developer Junshan Liu was shown this issue during the Dev Summit so hopefully it will be resolved soon.

Re: WAB toolbar icons display over map

AndrewMurdoch — Thu, 24 Mar 2016 21:56:02 GMT

Looking forward to input from Moxie and team!

Re: WAB toolbar icons display over map

JunshanLiu — Fri, 25 Mar 2016 02:09:11 GMT

This issue has existed from the first release and we have spent sometime to try to fix it but don't totally kill it, we just make this issue emerge less. Could you call resize() function by using settimeout in startup() or in _onLogoLoad() to have a try?

Re: WAB toolbar icons display over map

AndrewMurdoch — Tue, 29 Mar 2016 14:55:15 GMT

Could you be more specific in your suggestion for a work-around? Which resize() function and which startup() function are you referring to? In the LayoutManager.js file? This file does have a resize() method, but not a startup() method.

Where is the _onLogoLoad() method? I can't seem to find this in my WAB Dev Edition 1.2 application.

Also, I've now been able to duplicate this consistently by using Chrome Dev Tools to "throttle" the connection down to 2G speeds (250 kbps download speed).

Thanks,

Andrew

Re: WAB toolbar icons display over map

JunshanLiu — Wed, 30 Mar 2016 02:39:22 GMT

These 2 methods are in foldabletheme/widgets/HeadController/Widget.js.

Thanks for you report how to reproduce this issue, I'll have a try.

Re: WAB toolbar icons display over map

JunshanLiu — Wed, 30 Mar 2016 02:59:11 GMT

I tried some times and still can't reproduce this issue by using 2G connection.