app-drawer-layout broken content position when hidden during element initialization.

[coreyfarrell]

Description

The app-drawer element inside app-drawer-layout sits on top of content if hidden when created. This is due to width being 0 when hidden and resetLayout being called when the element is created instead of when it is shown.

Live Demo

https://jsbin.com/metolohivi/edit?output

Steps to reproduce

Open the jsbin demo with a wide browser window (more than 640px). Note that you cannot see "main title" or "main content". Resize your window small enough to hide the app-draw, then resize large again. This manual resize causes 'resetLayout' to run and correct the display issue. Tested on Chrome 51.

[keanulee]

@coreyfarrell Generally, you'll need to call <app-drawer-layout>.resetLayout() whenever app-drawer/-layout changes size (since app-drawer-layout needs to get the size of the drawer to know where to place the content). However, we should make app-drawer respond to iron-resize (similar to app-header) so that it's automatically works with iron-pages.

[coreyfarrell]

I've tested the change it doesn't seem to work always. I'm writing a page that uses iron-ajax to ask the server if there is an active session. iron-pages displays a login form or app-drawer-layout depending on active session or not.

Your patch fixes the situation where app-drawer-layout is not visible at page load and not shown immediately - so when the user has to type account/password this is a long enough delay for your patch to work.

This does not work correctly when the resize is performed immediately after page load (the initial AJAX request says we're signed in already). I'm not sure the best way to create a JSBIN demo of this since it requires the master version of app-layout.

[frankiefu]

@coreyfarrell, you can use custom configuration to specify the branch to pull, see the polygit doc. An example jsbin: http://jsbin.com/judesavuvu/edit?html,output

[keanulee]

@coreyfarrell With the fix, resetLayout should be called whenever you change <iron-pages>.selected, even if that happens async to page load (e.g. through XHR response).

[coreyfarrell]

@keanulee I actually am calling resetLayout to deal with the XHR response setting iron-pages.selected. In my code I have <iron-pages selected="{{_activePage(sessionInfo)}}">. Using a timer to run resetLayout from _activePage was not reliable, the required delay was not consistent.

Right now I'm using the iron-select event, using setTimeout with a 0ms delay to call resetLayout. This seems to work reliably, I assume the setTimeout with 0ms delay allows display to refresh in the current thread before we read the drawer width.