[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now


Rendering Order of content vs. master in Master Page arrangement causes flash

Posted on 2014-04-28
Medium Priority
Last Modified: 2014-05-14

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!
Question by:azTop
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 28

Assisted Solution

by:Ryan McCauley
Ryan McCauley earned 1000 total points
ID: 40035881
The browser will render content as it receives it from the server, so you're correct in thinking that the render delay and flash you're seeing are something that's happening on the client. You may be able to set the layout a bit more precisely rather than using float to get it to appear in approximately the right spot when it's initially rendered, but the browser will still update things as all of the content is received.

The most direct way to address this is to adjust the amount of content you're sending to your browser - is there a way to shrink the page size? Is there a significant amount of white space when you do a "View Source" on the rendered page? Are there unnecessary elements you can remove or can move to an asynchronous panel that's refreshed after the initial load? If some content is being sent, and then IIS is waiting for an event before sending the rest, that delay could cause rendering issues. At very minimum, does your web server have content compression enabled?

There are some suggestions for troubleshooting this (or at least getting some more precise details on which portion of your page is causing the delays) at this Stackoverflow question:


Accepted Solution

azTop earned 0 total points
ID: 40054476
Thanks for your help. You have given me additional opportunities for improvement, which is appreciated.

In the end, I went back to iterate over the possible combinations of float, etc. and came up with a winner.

HorizontalAlign="Left" ( attribute ) and float:left; for the left panel. And, just HorizontalAlign="Right"  for the right panel.

Author Closing Comment

ID: 40064020
As stated above, the specific combination of attributes and float caused the panel to initially appear in its correct position.

Featured Post

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Foreword (May 2015) This web page has appeared at Google.  It's definitely worth considering! https://www.google.com/about/careers/students/guide-to-technical-development.html How to Know You are Making a Difference at EE In August, 2013, one …
Entering time in Microsoft Access can be difficult. An input mask often bothers users more than helping them and won't catch all typing errors. This article shows how to create a textbox for 24-hour time input with full validation politely catching …
This video teaches users how to migrate an existing Wordpress website to a new domain.
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question