Rendering Order of content vs. master in Master Page arrangement causes flash
Posted on 2014-04-28
I have a nested MasterPage arrangement. On the top master page I have a menu across the top and a panel control down the right. On the inner master page, I have a menu across the top and then a panel which occupies most of the left bottom portion of the screen. When the page renders, the panel on the right hand side of the top master first appears on the left hand side of the screen in a flash. Then, when the nested master page appears with its content, the panel moves into its correct position along the right side of the screen. I want to get rid of the right panel's initial flash appearance on the left. The panel has a couple of grid controls in it with data. The main content on the left is also displaying data. The panels are float left and float right to allow them to be side by side and have a 75%/25% sizing.
I have tried using visibility or display attributes to delay the right panel's appearance via both script and server side. But as I tried this and stepped through execution, I realized that all of the code completes execution prior to the rendering and it appears to be something on the client that decides to show the master first and then the content.
I was thinking about changing the right hand panel to also be a content page. However, a lot of code would have to be rewritten and I am wondering if it would be worth it because even then, there is no guarantee that I could force the left content to render before the right.
The grids in the right panel are in an updatepanel as well. And, the menus are in update panels as well as the main content block.
I would just like to get some ideas on why the client isn't waiting until all of the content is ready and just display the controls where they belong in one shot and how I can affect the order of display to avoid the flash. Thanks!