Loading ...
Sorry, an error occurred while loading the content.

TabView content shifting as page size is changed.

Expand Messages
  • adventures_in_design
    I am using the TabView control on a web application. It worked fine in the original HTML design. The page has been converted to ASPX and is being served from a
    Message 1 of 1 , Nov 3, 2008
    • 0 Attachment
      I am using the TabView control on a web application. It worked fine in
      the original HTML design. The page has been converted to ASPX and is
      being served from a Windows IIs server.

      The TabView continues to perform as expected. When you click on one of
      three tabs, an external HTML page is loaded into a 500 pixel wide div
      located in the middle of the main page.

      However, if the ASPX page is resized; that is made wider or narrower,
      the content in the div remains stationary and overlaps areas outside
      of the container div.

      The original HTML page did not exhibit the behavior. When the page was
      resized, th external content moved with the page, just as you would

      Here's where someone will ask for code to look at. The problem is I am
      a contractor at large commercial operation and cannot display code
      outside of the company. There is a NDA involved and the actual web
      application is designed to be used by a select group of employees. So
      I cannot show my code.

      I can tell you that I based my JavaScript on the TabView example and
      outside of variable names, the script is nearly identical to what is
      used in the "build from Markup" TabView example.

      The page consists of a header and footer with three columns in
      between. The left and right columns are narrower and contain various
      graphical components. The center 500px wide container is a div that
      contains the tabs themselves as well as the external content.

      As I said, the HTML version works as expected. When converted to ASPX,
      however the content in the middle div flows outside of the div
      whenever the page is resized. Refreshing the page will cause the
      content to reload inside the div, so the page looks as it should. The
      first time you load the page, the content always flows into the
      correct position. Only when the page changes width does the content
      misbehave. Refreshing causes the content to readjust itself so the
      page looks good again.

      The company uses Internet Explorer exclusively, and employees are not
      allowed to install browsers other than IE6 and IE7. I have not had an
      opportunity to test the latest file in IE7, so it may work in that
      version. However there are thousands of employees still using IE6 at
      this site and the gradual transition to IE7 won't be completed until 2010.

      The entire page is 1000 pixels wide. It is not a fluid layout, so when
      the page is resized, the three columns each remain the same width. If
      the window becomes smaller than 1000 pixels the right side of the page
      is cropped out of the viewport. Stretching the viewport wider than a
      1000 pixels causes the entire page to be centered in the viewport. So
      the page is always 1000 pixels wide, no matter what size the browsere
      window. However the content provided by the TabView control appears to
      be locked down and remains fixed in position when the page width is

      Any suggestions would be very much appreciated.
    Your message has been successfully submitted and would be delivered to recipients shortly.