Question

I have a simple search form which launches a jQuery UI dialog that contains 5 jQuery UI tabs each containing their own jqgrid. Removing the javascript that renders the grids causes the scrollbar to go away. Changing the widths of the grids has no effect.

As you can see from the screen shot the horizontal scroll bar appears and this causes the vertical scroll bar to appear.

I am using jquery 1.7.2, jqueryui 1.8.22, jqgrid 4.4.0 and internet explorer 8.0

I load the dialog by ajax like so

    function LoadDialog(id) {
        $('#myPopup').dialog({
            height: 800,
            width: 1100,
            autoOpen: false,
            open: function (event, ui) {
                $('#myPopup').html('');
                $.ajax(
                    '<%: Url.Action("loadDetails") %>/' + id,
                    {
                        success: function (data) {
                            $('#myPopup').html(data);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            DisplayMessage(textStatus, errorThrown);
                        }
                    }
                );
            }
        });
        $('#myPopup').dialog('open');
    }

The loadDetails action method returns this view

<div id="contentWrapper">
    <div id="details"></div>
    <div id="tabs">
        <ul>
            <li><%: Html.ActionLink("tab1") %></li>
            <li><%: Html.ActionLink("tab2") %></li>
            <li><%: Html.ActionLink("tab3") %></li>
            <li><%: Html.ActionLink("tab4") %></li>
            <li><%: Html.ActionLink("tab5") %></li>
    </div>
<div>

With this script

<script type="text/javascript">
$('#tabs').tabs({
    cache: true,
    ajaxOptions: {
        cache: true
    }
});
</script>

Each tab loads up a table and a div for the jqgrid with the appropriate javascript to load the grid, their widths are set to 1000px.

<table id="gridtableX'></table><div id="griddivX"></div>
<script type="text/javascript">
$('#gridtableX').jqGrid({
    url: '/Home/GetGridData/1234',
    datatype: 'json',
    height: 320,
    colNames: ['Col1','Col2','Col3','Col4'],
    colModel: [
        {name:'Col1',width:30,sortable:false},
        {name:'Col2',width:40,sortable:false}, 
        {name:'Col3',width:40,sortable:false}, 
        {name:'Col4',width:40,sortable:false}],
    rowNum:4,
    width:1000,
    scrollOffset:0,
    hidegrid: false,
    viewrecords: true,
    hoverrows: false,
    beforeSelectRow: function(rowid, e){ return false; },
    pager: '#griddivX'}).navGrid('#griddivX',{edit:false,add:false,del:false});
</script>

I’m currently working on a simple example, but it’s taking a while.
If someone has run into this before, please let me know.
What is causing this, how can I fix it?

Answer 1

It’s interesting problem! Could you post URL which can be used to examine the problem?

I suppose, that the reason of the problem could be cellWidth function introduced in jqGrid 4.4.0. Just for testing of that you can modify the code of cellWidth and include the line

if ($.browser.msie) { return false; }

somewhere at the beginning of the code of cellWidth. In the case no div having 10000px as left:10000px will be created. Alternatively you can try to use to modify left:10000px to left:-10000px or to make some other experiments. Additionally I would recommend you to read the answer which was the origin of the introduction of cellWidth function.