jqGrid displaying different sizes although code is similar - jqgrid

Question

I am working on a jqGrid for two different but similar searches on a site. The idea is to have two different divs on a popup window. One that has search fields and the other that displays the results. The functionality is fine, but the aesthetics are bugging me a little bit. For one thing the grid comes up as a different size in one. I use very similar code for both pop up windows however...
<div>
<div id="searchPatient" class="float-left">
<ul>
<li>Search By MRN</li>
<li>Search By Demo</li>
#*<li>Return Table</li>*#
</ul>
#Html.Partial("_SearchByMRN")
#Html.Partial("_SearchByDemographic")
#*#Html.Partial("_RetTable")*#
</div>
<div class="content-wrapper clear-fix float-left" style="height: 1px; padding: 10px;">
Search For Patient Return Results
<table id="list" class="scroll"></table>
</div>
<div id="resultDiv" style="float: right; clear:both">
</div>
</div>
$(document).ready(function () {
$("#list").jqGrid({
shrinkToFit: false,
autowidth: true,
datatype: 'jsonstring',
mtype: 'POST',
colNames: [
'Last Name',
'First Name',
'DOB',
'Gender',
'EMPIID',
'MedipacId',
'EPCID'
],
colModel: [
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'DOB', width: 115, align: 'left' },
{ name: 'GENDER', width: 115, align: 'left' },
{ name: 'EMPIID', width: 115, align: 'left' },
{ name: 'medipacId', width: 145, align: 'left' },
{ name: 'EPCID', width: 145, align: 'left' }
],
...//unnecessary settings and what-not
)};
)};
That code sets up this window...
<div>
<div id="searchEncounter" class="float-left">
#using (Html.BeginForm("searchEncounterByCriteria", "SearchEncounter", new { popId = popId }, FormMethod.Post, new { id = "SearchPatID" })) {
<ul>
<li>First Name</li>#Html.TextBox("fNameTB", null, new { id = "fNameTB" })
<li>Last Name</li>#Html.TextBox("lNameTB", null, new { id = "lNameTB" })
<li>MRN</li>#Html.TextBox("MRN", null, new { id = "MRN" })
<li>Hospital Fin</li>#Html.TextBox("HospFin", null, new { id = "HospFin" })
</ul>
<br />
<p><input id="sPat" type="submit" value="search For This Patient" class="button" style="float: left; width:auto"/></p>
}
</div>
<div class="content-wrapper clear-fix float-left" style="height: 1px; padding: 10px;">
Search For Encounter Return Results
<table id="list" class="scroll"></table>
</div>
<div id="resultDivSE" style="float: right; clear:both">
</div>
</div>
$(document).ready(function () {
$("#list").jqGrid({
shrinkToFit: false,
autowidth: true,
datatype: 'jsonstring',
mtype: 'POST',
colNames: [
'MRN',
'Hospital Fin',
'First Name',
'Last Name',
'Date of birth',
'Completed Pathway',
'Completed Pathway Reason',
'PCP Appointment',
'Specialist Appointment',
'Admit Date'
],
colModel: [
{ name: 'MRN', width: 125, align: 'left' },
{ name: 'Hospital_Fin', width: 145, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'Date_of_birth', width: 145, align: 'left' },
{ name: 'Completed_Pathway', width: 125, align: 'left' },
{ name: 'Completed_Pathway_Reason', width: 165, align: 'left' },
{ name: 'PCP_Appointment', width: 115, align: 'left' },
{ name: 'Specialist_Appointment', width: 125, align: 'left' },
{ name: 'Admit_Date', width: 185, align: 'left' }],
...//superfluous settings that have nothing to do with Grid...
)};
)};
That code sets up this window...
Now when debugging using chrome I find out that the widths are being set. How they are doing it I don't know. I do know that the element.style {} is being set to
element.style {
width: 870px;
}
In the second case...
And in the first case it is being set too...
element.style {
width: 340px;
}
The actual code says
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_list" dir="ltr" style="width: 870px;">
in the second case and
<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_list" dir="ltr" style="width: 340px;">
In the first case.
I am not sure why this is occuring and how to change it? What is determining how the width is being set?
Any ideas or advice on how to set widths more consistently? I want the first grid to be as wide as the second one.
Thanks

Answer 1

If you have the div of both grids set to autowidth: true, the grid should expand to the width of the parent element. In this case if the parent element of both grids is the same the grids should be the same width.
Another messy option would be to you could specify your columns widths in the first grid to add up to be equivalent widths of the second grid.
For reference you can examine the autowidth property on
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

Answer 2

Try completely removing searchPatient and searchEncounter divs, and see if something changes. If yes, some differences inside them are affecting the sibling div containing the resultant grids.