Editable Datagrid Filter - columns get wider while filtering

[elmorekevin]

I can't seem to find the root cause of this. The width of the columns grow by some amount of pixels each time I type or delete a letter. They keep growing until they are off the page, then I have to reload the whole webpage. I'll include my code. One thing that may be an issue is edatagrid vs datagrid--I'm not sure when to use one or the other.

Thanks for the help!

Datagrid Attributes (I made a php variable to try to keep the html consistent --I'm sure there's a nicer way)

Code:

$datagrid_attributes = 'class="easyui-datagrid" fit="true" fitColumns="true" pagination="true" rownumbers="false" singleSelect="true" remoteFilter="true" remoteSort="true" pageSize="50" ';

JS Function code:

Code:

//IPD Device Table
$(function(){
$('#dg-ipd').edatagrid({
url: 'get_ipd.php?location_filter=<?php echo $code;?>',
loadMsg: "Loading data",
updateUrl: 'update_ipd.php',
toolbar: '#toolbar-ipd'
});
//This section allow for special filtering (like a dropdown < > =)
$('#dg-ipd').edatagrid('enableFilter');
});

Table code:

Code:

<!--Tab 7-->
<div title="Other IP Devices" style="padding:5px;height:100%">
<!--DataGrid editor for IPD-->
<table id="dg-ipd" title="Other IP Devices: Double click the row to begin editing." toolbar="#toolbar-ipd" idField="id" <?php echo $datagrid_attributes; ?>>
<thead frozen='true'>
<tr>
<th field="id" editor="{type:'textbox',options:{readonly:true}}">Inv ID</th>
<th field="location" editor="{type:'textbox',options:{readonly:true}}">Location</th>
<th field="make" editor="{type:'textbox',options:{readonly:true}}">Make</th>
<th field="model" editor="{type:'textbox',options:{readonly:true}}">Model</th>
<th field="mac" editor="{type:'textbox',options:{readonly:true}}">MAC</th>
<th field="name" editor="text">Device Name</th>
<th field="ip" editor="text">IP</th>
<th field="ip_link" formatter="ip_link">IP</th>
<th data-options="field:'uplink_device', formatter: function(value,row){return row.uplink_device}"
editor="{type:'combobox',
options:{
valueField: 'uplink_device_name',
textField: 'uplink_device_name',
url: 'search_uplink_device_name.php',
onSelect: function(rec)
{
var url = 'search_uplink_device_name.php?q=' + rec.uplink_device_name;
$.getJSON( url, function( data )
{
   var result = eval('(' + data + ')');
   alert(result.uplink_device_name);
});
}
}
}"
>Uplink Device</th>
</tr>
</thead>
</table>
<div id="toolbar-ipd">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg-ipd').edatagrid('saveRow')">Save Changes</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg-ipd').edatagrid('cancelRow')">Cancel</a>
</div>
</div>

[jarry]

Please look at this example http://code.reloado.com/eketit3/edit#preview. It works fine.

[elmorekevin]

I found my issue in easyui.css. The width of a header was set for 10,000px. I changed to width: 100% and that stopped the widening columns.

.datagrid-header-inner {
  float: left;
  width: 10000px;
}

I stripped my 6 tab html page down to just a single tab, and was still getting the effect. So after some poking around I tried changing that value.
Thanks Again for the reply,
Kevin