jQueryUI Accordion not staying with its appointed boundaries

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
  1. 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;
    }




























  1. // 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');
    });

    });