Home/ Questions/Q 9187271
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:43:42+00:00

I have an ASP.net page used to display server inventory information and the information

  • 0

I have an ASP.net page used to display server inventory information and the information is separated into tabs using the JQuery UI as follows:

<div id="tabs" style="z-index: auto; width: 100%;">
     <ul>
         <li><a href="#tabs-1">Summary</a></li>
         <li><a href="#tabs-11">Audit</a></li>
         <li><a href="#tabs-3">Sessions/Security</a></li>
         <li><a href="#tabs-4">Programs/Services</a></li>
         <li><a href="#tabs-5">Processor</a></li>
         <li><a href="#tabs-6">Memory</a></li>
         <li><a href="#tabs-7">Storage</a></li>
         <li><a href="#tabs-9">Roles/Tasks</a></li>
         <li><a href="#tabs-13">Ascertain</a></li>
         <li><a href="#tabs-10">Charts</a></li>
     </ul>
 <div id="tabs-1" style="height: 100%; background-color: #F8FAFA;">
 .......
 .......
 ...other code for stuff in tabs......

This is working fairly well and yields a tabbed pane that expands when the window does :

Image1

The issue I am running into is when a user selects the tab in the first row, furthest to the right (Roles/tasks in the above picture) I will get the following result:

Image2

I cannot seem to figure out why the tabs are skewed in this fashion. I have tested this in both Chrome and IE 9 with the same results. This happens no matter what size the window is and no matter which tab is furthest to the right:

Image3

Edit: I did not post the complete code including closing DIVs because the markup is a couple thousand lines and I didn’t want to sift through it all. The actual code is complete.

Edit 2: Here is the CSS Used for tabs. I use what is generated by the JQUERY UI custom theme page.

.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a,     .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I was able to resolve the issue by updating my JQUERY library from version 1.8.162 to 1.10.0. This must have been something they took care of in the upgrade.

    • 0