Search and Top Navigation
#8198 closed bug (duplicate)
Opened March 15, 2012 04:34PM UTC
Closed March 15, 2012 04:45PM UTC
Last modified March 15, 2012 04:45PM UTC
Accordion menu affects tabs bar height when floated.
| Reported by: | chuckP | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.9.0 |
| Component: | ui.accordion | Version: | 1.8.18 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If an accordion menu is used and a jquery ui tab is floated next to it, when the menu is expanded the tab bar expands to the same height as the expanded menu. IE9, FF10
Load order of tabs or accordion does not affect outcome.
<head>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.18.min.js" type="text/javascript"></script>
<link href="Content/cupertino/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<script src="Content/cupertino/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<style>
#contentWrap
{
background: none repeat scroll 0 0 #FFFFFF;
float: left;
width: 100%;
margin-bottom: 100px;
}
#sideBar {
clear: none;
float: left;
margin: 0;
padding: 0;
width: 200px;
}
#mainContent
{
margin-left: 215px;
padding: 10px 0 0 19px;
}
</style>
</head>
<body>
<script>
$(document).ready(function () {
$("#accordionNav").accordion({
active: false,
autoHeight: false,
clearStyle: true,
collapsible: true,
icons: false,
navigation: true
});
$("#tabs").tabs();
});
</script>
<div id="contentWrap">
<div id="sideBar">
<div id="accordionNav">
<h3>1</h3>
<div>
<ul class="accordionMenu">
<li>a</li>
<li>b</li>
</ul>
</div>
<h3>
2</h3>
<div>
<ul class="accordionMenu">
<li>c</li>
<li>d</li>
</ul>
</div>
</div>
</div>
<div id="mainContent">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Intake</a></li>
<li><a href="#tabs-2">Archive</a></li>
</ul>
<div id="tabs-1">
<p>
tab1</p>
</div>
<div id="tabs-2">
<p>
tab2</p>
</div>
</div>
</div>
</div>
</body>
</html>
This has nothing to do with the accordion.