文章/答案/技术大牛

发布

社区首页 >问答首页 >IE 11中初始页面加载时的jqgrid溢出面板

问IE 11中初始页面加载时的jqgrid溢出面板
EN

Stack Overflow用户

提问于 2016-04-16 05:32:28

回答 1查看 153关注 0票数 1

我在bootstrap面板中使用了几个jqGrids。在chrome中工作得很好。在IE中的初始页面加载中(我使用的是11)，jqGrids比面板更宽，所以它们会在右侧溢出。如果我刷新页面，一切都是正常的。我在多个页面上有网格，这只发生在一个页面上。这一页的不同之处在于它有一个左侧(全高)菜单。

我假设IE在第一次尝试时没有正确地呈现“autowidth:true”。

HTML：

<body>
    <div id="wrapper">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand"><a href="/">MyApp</a></li>
                <li><a href="#manageRequest">Manage Requests</a></li>
                <li><a href="#manageHardware">Manage Hardware</a></li>
            </ul>   
        </div>
        <div id="page-content-wrapper">
            <div class="panel panel-primary" id="manageRequest">
                <div class="panel panel-heading">Manage Requests</div>
                <div class="panel panel-body">
                    <p class="lead">Click on a request to see available actions</p>
                    <table class="table table-bordered table-striped" id="request-grid"></table>
                    <div id="request-pager"></div>
                </div>
            </div>

            <div class="panel panel-success" id="manageHardware">
                <div class="panel panel-heading">Manage Hardware</div>
                <div class="panel panel-body">
                    <p class="lead">Click on a device, then click edit</p>
                    <table class="table table-bordered table-striped" id="hardware-grid"></table>
                    <div id="hardware-pager"></div>
                </div>
            </div>
        </div>
    </div>
</body>

网格的JS代码：

// Request Grid Operations
$("#request-grid").jqGrid({
    url: requestUrl,
    datatype: "json",
    colNames: ['Request Number', 'Approved?', 'Request Status', 'Employee Name', 'Requested By', 'Request Date'],
    colModel: [
            { name: "RequestId", key: true, sortable: true, search: true, sorttype: 'integer', searchoptions: { sopt: ['eq'] } },
            { name: "IsApproved" },
            { name: "RequestStatus" },
            { name: "EmployeeName", stype: "text", searchoptions: { sopt: ['eq', 'cn', 'bw'] } },
            { name: "RequesterEmail" },
            {
                name: "DateCreated", sortable: true, sorttype: 'date', formatter: 'date', formatoptions: { srcformat: 'ISO8601Long', newformat: "m/d/Y" },
                search: false             
            }
    ],
    loadonce: true,
    height: '500',
    autowidth: true, 
    pager: "#request-pager",
    onSelectRow: function (id) {            
        $("#RequestNumber").val(id);
        $("#SelectedRequestModel").modal('show');
    }
});
$("#request-grid").jqGrid('navGrid', '#request-pager', { edit: false, add: false, del: false, search: true, view: false, refresh: true }, {},{},{}, { closeAfterSearch: true });


// Hardware Grid Operations
$("#hardware-grid").jqGrid({
    url: hardwareGridUrl,
    datatype: "json",
    colNames: ['HardwareId', 'Model', 'Type', 'Description', 'Price', 'Mobile Device?'],
    colModel: [
            { name: "HardwareId", key: true, hidden: true },
            { name: "Model", editable: true, editrules: { required: true } },
            { name: "ItemType", editable: true, editrules: { required: true } },
            { name: "ItemDescription", editable: true, edittype: 'textarea', editoptions: { rows: "5", cols: "25" }, width: 500 },
            { name: "Price", editable: true, formatter: 'currency', align: 'center' },
            { name: "IsMobile", editable: true, edittype: 'checkbox', editoptions: { value: 'true:false' }, editrules: { required: true } },
    ],
    loadonce: true,
    height: '300',
    autowidth: true,
    pager: "#hardware-pager",
    editurl: editHardwareUrl            
});

$("#hardware-grid").jqGrid('navGrid', '#hardware-pager', { edit: true, add: true, del: true, search: true, view: false, refresh: true },
        { 
            reloadAfterSubmit: true, closeOnEscape: true, closeAfterEdit: true,
            afterSubmit: function () {
                $(this).jqGrid("setGridParam", { datatype: 'json' });
                return true;
            }
        },
        {
            reloadAfterSubmit: true, closeOnEscape: true, closeAfterAdd: true,
            afterSubmit: function () {
                $(this).jqGrid("setGridParam", { datatype: 'json' });
                return [true, ""];
            }
        },
        {}
);

twitter-bootstrap

jqgrid

回答 1

Stack Overflow用户

发布于 2017-01-06 00:24:17

我遇到了同样的问题，在包含元素上设置填充似乎是一项不错的快速工作。

我的Html

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Work Sheet</h3>
    </div>
    <div id="gridContainer" class=panel-body>
        <table id="jqGrid">
        </table>
        <div id="jqGridPager">
        </div>
    </div>
</div>

我的CSS

#gridContainer {
    padding: 0px 7px 0px 0px;
}

不管是什么原因，它似乎总是从右边流出来。7px做到了这一点。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36657168

复制

相似问题

问IE 11中初始页面加载时的jqgrid溢出面板
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE 11中初始页面加载时的jqgrid溢出面板EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE 11中初始页面加载时的jqgrid溢出面板
EN