Question

Above is the image, where left side is an accordion, and right side is content part (inside a table) I am concerned about the content part(right side) why is the table not 100% width? while the heading on top of it is expanded to full page width. Given below is my code for the content.

var i=0;
var filesystem=[];
$(xml).find('file').each(function(){ 
    //console.info($(this).attr('total')+", "+$(this).attr('free')+", "+$(this).attr('used')+", "+$(this).attr('percentage'));
    var row={};
    row.id=i++;
    row.total=$(this).attr('total');
    row.free=$(this).attr('free');
    row.used=$(this).attr('used');
    row.percentage=$(this).attr('percentage');
    filesystem.push(row);
});


$('#detailTable').empty();
$('<div width="100%">')
.attr('id','diskUsageSpan')
.html('<div class="titleBlue">Configuration&gt;System&gt;Disk Usage</div>'+
        '<table id="list1" width="100%"></table>'+
        '<div id="gridpager"></div>'+
    '</div>')        
.appendTo('#detailTable');    


jQuery("#list1").jqGrid({
    datatype: "clientSide",
    height: 250,
       colNames:['id','Total Space','Free Space', 'Used Space', 'Used Percentage'],
       colModel:[
           {name:'id',index:'id', width:90, align:"right"},
           {name:'total',index:'total', width:90, align:"right"},
           {name:'free',index:'free', width:90, align:"right"},
           {name:'used',index:'used', width:90, align:"right"},
           {name:'percentage',index:'percentage', width:120, align:"right"}
       ],
       pagination:true,
       pager : '#gridpager',
       rowNum:10,
    viewrecords: true,
    gridview: true,
    edit:false,
    add:false,
    del:false

});


for(var i=0;i<filesystem.length;i++)
    jQuery("#list1").jqGrid('addRowData',i+1,filesystem[i]);

jQuery("#list1").setGridParam({rowNum:10}).trigger("reloadGrid");

Answer 1

You can use either height: 'auto' or scrollOffset:0 jqGrid options to fix the problem. The reason is the way how the grid width will be calculated. It is not perfect and always reserves some additional place for the scroll bar.

Another options like autowidth:true or shrinkToFit:false can be also used in some situations.