• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2883
  • Last Modified:

Problem with JQuery UI - Tab panel position

I am trying different page variations with the JQuery UI library and I am running into some problems with columns, whether they are generated using CSS or tables.  The position of the tab panel (where the content for each tab is) seems to be relative to the bottom of the div or table in the same area.  Changing the positioning of the column and the tab panel has yielded no solution and I have also tried assigning a high z-index value with no luck.  Does anyone know how to get that tab panel to appear right under the tabs as it is suppose and not at the bottom of the column?

Thanks for you help.
#outerWrapper #contentWrapper #rightColumn1 {
	float: right;
	padding: 10px 0 0 0;
	clear: right;
	width: 260px;
	margin: -20px -9px 0 0px;
	position: relative;
	z-index: 99999;
}
 
.ui-tabs-panel {
	font-family: Verdana, Arial, sans-serif;
	clear:both;
	border-top: 1px solid #97a5b0;
	padding: 0px;
	font-size: 1.14em;
	line-height: 20px;
	position:relative;
	z-index: 25;
}

Open in new window

0
londonlife
Asked:
londonlife
  • 3
  • 3
1 Solution
 
Mark StegglesWeb DeveloperCommented:
Hello,

Can you post a link to the page?

Thanks
0
 
scrathcyboyCommented:
In tables --

<TABLE valign="top">
<TD valign="top">

in CSS --

DIV { text-align:top; vertical-align:top; }
TABLE { text-align:top; vertical-align:top; }
TD { text-align:top; vertical-align:top; }

0
 
londonlifeAuthor Commented:
I appreciate the comment scrathcyboy but it seems that did not resolve the issue.  It seems to be an issue with the tab panel position being relative to the bottom of the right column (which is a DIV).  I have tired different position properties but they all remove the DIV from being relative to the container its held in.

If anyone else missed it the link to the file is here:
http://joelmorrisondesigns.com/f55f/problem.html
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Mark StegglesWeb DeveloperCommented:
Sorry I missed the link earlier.

The tabs "Basic Info" "Details" "Get started"

Where do u want them to be?
0
 
londonlifeAuthor Commented:
The tabs themselves are fine where they are.  I would like the information they contain to wrap around the right column that I have instead of started at the bottom of it.
0
 
Mark StegglesWeb DeveloperCommented:
Hokay, FINALLY found a fix for this!

.ui-tabs-nav {
      float:left;
    list-style: none;
    margin: 0;
    padding: 0 0 0 2px;
      margin:0 0 0 0px;
}

.ui-tabs-panel {
      font-family: Verdana, Arial, sans-serif;
      clear:left;
      border-top: 1px solid #97a5b0;
      padding: 0px;
      font-size: 1.14em;
      line-height: 20px;
      position:relative;
      z-index: 25;
}



That should do it


Let me know!
0
 
londonlifeAuthor Commented:
Thanks for you help.  It didn't even cross my mind to float the dumb thing!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now