Opened 8 years ago

Closed 8 years ago

#7606 closed bug (notabug)

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

Change History (7)

comment:1 Changed 8 years ago by Scott González

Owner: set to ricktig
Status: newpending

Please provide your simple test page.

comment:2 Changed 8 years ago by ricktig

Status: pendingnew

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>

comment:3 Changed 8 years ago by Scott González

Status: newpending

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...

comment:4 Changed 8 years ago by ricktig

Status: pendingnew

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

Rick R.

Last edited 8 years ago by ricktig (previous) (diff)

comment:5 Changed 8 years ago by Scott González

Status: newpending

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.

comment:6 Changed 8 years ago by ricktig

Status: pendingnew

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.

comment:7 Changed 8 years ago by Scott González

Resolution: invalid
Status: newclosed
Note: See TracTickets for help on using tickets.