jQueryUI Accordion not staying with its appointed boundaries
I have two accordions (each within their own <div>) that are spilling over outside their own div and the next higher div too. I worked on this the whole weekend, can not find a suitable solution?? Any one have other ideas?
I posted my problem to my testing
website. Click ok for the security notice. Click on the bullet menu item that resides beneath Small Arms. This will bring up jqGrid. Select a bullet row within the grid. Click ok for the troubleshooting pop-up. The next screen is where I am having my issues with accordions. The accordions should remain within their highlighted borders (colored pink and red). I have tried specifying absolute sizes for the "left" and "right". No change. I have tried setting autoHeight to false which would work, but my user wants the accordions to be full screen (within the blue section) all the time. I have tried setting "clear" on both divs to "both", "left" and "right" in different configurations. This only throws the right div to a lower position on the screen. I even tried turning accordion's fullSpace option to false, but that makes my test within the panes not visible.
Got any ideas??
I would like to stay with UI's accordion due to it is compatible with themeroller.
Tony
- div#weapon {
height: 465px;
width: 957px;
padding: 10px 10px 15px 10px; /*top right bottom left */
margin-right: 15px;
background-color: #000033;
color:#FFFF00;
border: 1px solid red;
}
div#weapon div#left {
display: none;
clear: left;
float: left;
height: 465px;
width: 450px;
margin-left: 10px;
border: 3px dashed pink;
}
div#weapon div#right {
display: none;
clear: right;
float: right;
height: 465px;
width: 450px;
margin-left: 20px;
/*width: 47%; ORIGINAL SETTING W/O height spec */
border: 3px dashed red;
}
- // Specific JS scripting for AME Library
$(document).ready(function() {
$('#securityNotice').dialog ({
modal: true,
resizable: true,
overlay : {
background: '#fff',
opacity: '0.7'
},
buttons: {
Ok: function() {
$(this).dialog('close');
$('#welcome').show('fast');
}
},
width: 400,
resizable: false
});
$('#nav').droppy({
speed: 100
});
$('#left').accordion({
header: 'h3',
fillSpace: true,
collapsible: true
});
$('#right').accordion({
header: 'h3',
fillSpace: true,
collapsible: true
});
$('#bullet').click(function() {
$('#searchResults').jqGrid('GridUnload');
$('#searchResults').jqGrid({
url: 'weaponLib/AME_sa-bullet.xml',
datatype: 'xml',
colNames:["DODIC","NSN", "Size/Caliber", "Nomenclature"],
colModel:[
{name:"dodic",index:"dodic", xmlmap:"DODIC", width:30, align:"center", search: true, stype:"text"},
{name:"NSN",index:"NSN", xmlmap:"transData>NSN", width:40, align:"center", search: true, stype: "float"},
{name:"size", index:"size", xmlmap:"size",width:30, align:"center", search: true, stype: "float"},
{name:"nomenclature",index:"nomenclature", xmlmap:"nomenclature", width:120, align:"left", search: false, sorttype: "text"}
],
height:250,
width: 900,
viewrecords: true,
xmlReader: {
root : "smallArms",
row: "bullet",
repeatitems: false,
id: "[saId]"
},
onSelectRow: function() {
var gsr = $('#searchResults').jqGrid('getGridParam', 'selrow');
if (gsr) {
var data = $('#searchResults').jqGrid('getRowData', gsr);
alert(data.nomenclature);
};
$('#theGrid').hide();
$('#weapon #left').show('fast');
$('#weapon #right').show('fast');
},
sortname: 'dodic',
rowNum: -1,
altRows: true,
pager: '#gridNavBar',
caption: "Bullet Results"
});
$('#searchResults').jqGrid('navGrid', '#gridNavBar', {search: true, edit: false, del: false, add: false, refresh: false});
$('#welcome').hide('slow');
$('#theGrid').show('fast');
});
});