WAB toolbar icons display over map

2665
8
03-24-2016 12:50 PM
AndrewMurdoch
Occasional Contributor

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

0 Kudos
8 Replies
RebeccaStrauch__GISP
MVP Emeritus

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.

0 Kudos
AndrewMurdoch
Occasional Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Andrew,

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

AndrewMurdoch
Occasional Contributor

Looking forward to input from Moxie and team! 

0 Kudos
JunshanLiu
Occasional Contributor III

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?

0 Kudos
AndrewMurdoch
Occasional Contributor

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

0 Kudos
JunshanLiu
Occasional Contributor III

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

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

0 Kudos
JunshanLiu
Occasional Contributor III

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

0 Kudos