Search code examples
jqueryjquery-uigridviewjquery-ui-tabs

How to fix jQuery tabs adjusting table columns widths to obscure content?


I created a web page that uses jQuery-UI tabs to display sections of data at a time. Each tab corresponds to a year. For each tab, there is an ASP.net GridView with information about that year.

As the user changes tabs, the tables display correctly, but when the page first opens in the browser and the code runs to initialize the jQuery-UI tabs, the table displays incorrectly. The data is all there, but the column widths are too narrow so that part of the text is obscured.

For some reason, I see this behavior in IE, but not in Firefox.


Solution

  • After extensively running the code thru the debugger, I've found a working solution:

    The jQuery-UI-tabs code applies a number of styles to different parts of the page. Among these applications are an application of the style ui-widget to the div for each tab content. If I apply this style to the div in my mark-up, then I don't have this problem in IE 7.