#8198 closed bug (duplicate)
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.