#7606 closed bug (notabug)

Opened August 04, 2011 06:17PM UTC

Closed August 07, 2011 07:11PM UTC

Tabs functionality - div overflows tab onto other tabs

Reported by: ricktig Owned by: ricktig
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: 1.8.14
Keywords: Cc:
Blocked by: Blocking:
Description

When using v1.8.14 with the smoothness template, I've created a tab page which displays up to nine tabs statically created. I've set up two divs on each tab with widths of 500px each and left positioning of 10px, and 600px respectively. When I load the right div with text content, any text beyond approximately 60 characters bleeds onto the other tabs at the same point where it exits the div. I've been able to duplicate it with a simple test html page as well.

When I reverted back to the 1.7.2 version of the js and theme (css), the problem disappears on both the test page and the production page.

I'm using jquery 1.6.1 for other parts of the site but have left the jquery 1.5.1 in the jqueryui folder.

Thanks for taking a look.

Rick Rose

Attachments (0)
Change History (7)

Changed August 04, 2011 06:20PM UTC by scottgonzalez comment:1

owner: → ricktig
status: new → pending

Please provide your simple test page.

Changed August 04, 2011 06:32PM UTC by ricktig comment:2

status: pending → new

Here's the broken code. It's in a php file since I'm querying mySQL records in the production php file. I'm hosting it on a local WAMP installation: Apache 2.2.17, MySQL 5.5.8, PHP 5.3.5.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>jQuery UI Example Page</title>

<link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>

<!--link to cascading style sheet-->

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript">

$(function(){

Tabs

$('#tabs').tabs();

hover states on the static widgets

$('#dialog_link, ul#icons li').hover(

function() { $(this).addClass('ui-state-hover'); },

function() { $(this).removeClass('ui-state-hover'); }

);

});

</script>

<div id="tabs">

<ul>

<li><a href="#tabs-1">First</a></li>

<li><a href="#tabs-2">Second</a></li>

<li><a href="#tabs-3">Third</a></li>

</ul>

<div id="tabs-1">

<div id = "leftdiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

<div id = "rightdiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

</div>

<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>

<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>

</div>

</body>

</html>

Changed August 04, 2011 06:57PM UTC by scottgonzalez comment:3

status: new → pending

How about an actual usable test page that has the styles that cause the problem. Use jsFiddle or jsbin, as mentioned in the big red box...

Changed August 06, 2011 11:18PM UTC by ricktig comment:4

_comment0: Thanks for the info. I've added it to jsFiddle. How will you see it there? I'm not familiar with that product. \ \ Rick R. → 1312672907692037
status: pending → new

Thanks for the info. I've added it to jsFiddle at http://jsfiddle.net/ricktig/635kd/

Rick R.

Changed August 07, 2011 12:17AM UTC by scottgonzalez comment:5

status: new → pending

That page is completely broken (complete misuse of jsFiddle, duplicated logic across panes and invalid HTML), not to mention it doesn't have any of the styling that you mention in this ticket.

Changed August 07, 2011 06:19PM UTC by ricktig comment:6

status: pending → new

Thank you for your reply. Please close this ticket as the issue has been resolved by removing the off-left css code as mentioned on the jQueryUI site to get a Google Maps inset to load.

Changed August 07, 2011 07:11PM UTC by scottgonzalez comment:7

resolution: → invalid
status: new → closed