1

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

Grrr

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?

Biff MaGriff
  • 8,102
  • 9
  • 61
  • 98

2 Answers2

4

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @BiffMaGriff: You are welcome! I'm glad that I could help you. Do you tried to use `left:-1000px`? Probably one could add additional style `position: "absolute"`: `style='position: absolute; left:-1000px; top: -1000px'` – Oleg Aug 14 '12 at 19:46
  • Hmm, I left the line `if ($.browser.msie) { return false; }` in the cellWidth function, however I see now that that does not completely fix the issue as when I close a dialog the blocking div gets resized to larger than the screen. Looks like I'm going to have to read your full answer on your link. Looks good though! – Biff MaGriff Aug 14 '12 at 20:40
0

Thanks to Oleg's answer I was able to solve the issue. For easier maintenance I added a new javascript file to my project and include it after my jquery.jgGrid.js

$.jgrid.cellWidth = function () {
    var $testDiv = $("<div class='ui-jqgrid' style='position:absolute;left:-1000px;top:-1000px'><table class='ui-jqgrid-btable' style='width:5px;'><tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>"),
    testCell = $testDiv.appendTo("body")
        .find("td")
        .width();
    $testDiv.remove();
    return 5 !== testCell;
}
Biff MaGriff
  • 8,102
  • 9
  • 61
  • 98