Opened 12 years ago
Closed 12 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 12 years ago by
Owner: | set to ricktig |
---|---|
Status: | new → pending |
comment:2 Changed 12 years ago by
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>
comment:3 Changed 12 years ago by
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...
comment:4 Changed 12 years ago by
Status: | pending → new |
---|
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.
comment:5 Changed 12 years ago by
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.
comment:6 Changed 12 years ago by
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.
comment:7 Changed 12 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
Please provide your simple test page.