javascript 不需要时如何去掉水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4959971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get rid of horizontal scroll bar when not needed
提问by Billy Logan
I have jqGrid with two columns, one being hidden. For some reason in FireFox it shows a horizontal scroll bar like below:
我有两列的 jqGrid，其中一列被隐藏。出于某种原因，在 FireFox 中它显示了一个水平滚动条，如下所示：
as soon as i set the second column to show the scroll bar goes away like below:
一旦我将第二列设置为显示滚动条就会消失，如下所示：
In IE this displays in the same manner accept that a vertical scroll is added to the first image. Think this has to do with the horizontal bar. If someone knows how to get rid of the horizontal bar without setting the height of the grid to anything other than 'auto' please let me know.
在 IE 中，这以相同的方式显示，接受将垂直滚动添加到第一张图像。认为这与单杠有关。如果有人知道如何摆脱单杠而不将网格的高度设置为“自动”以外的任何值，请告诉我。
my jqGrid setup script:
我的 jqGrid 安装脚本：
grid.jqGrid({
url: "/Availability/GetData",
colNames: ['row_id', 'Availability'],
colModel: [
{ name: 'row_id', index: 'row_id', width: 20, hidden: false, search: false, editable: true, editoptions: { readonly: true, size: 10 }, formoptions: { rowpos: 1, label: "Id", elmprefix: "(*)"} },
{ name: 'AVAILABILITY', index: 'AVAILABILITY', width: 75, sortable: true, hidden: false, editable: true, editoptions: { size: 20, maxlength: 20 }, formoptions: { rowpos: 2, label: "Availability", elmprefix: "<span class='jqgridrequired'>*</span>" }, editrules: { required: true} }
],
pager: pager,
datatype: 'json',
imgpath: '/Scripts/jqGrid/themes/redmond/images',
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: false,
userdata: "UserData",
id: "row_id"
},
loadtext: 'Loading Data...',
loadui: "enable",
mtype: 'GET',
rowNum: 10,
rowList: [10, 20, 50],
viewrecords: true,
multiselect: false,
sortorder: "asc",
height: 'auto',
autowidth: true,
sortname: 'AVAILABILITY',
caption: 'Existing Availabilities'
}).navGrid('#pager', { view: false, del: true, add: true, edit: true, search: false },
{ height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (<span class='jqgridrequired'>*</span>) are required", closeAfterEdit: true, url: "/Availability/Edit", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for edit
{height: 150, reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, bottominfo: "Fields marked with (<span class='jqgridrequired'>*</span>) are required", closeAfterAdd: true, url: "/Availability/Create", savekey: [true, 13], navkeys: [true, 38, 40], afterSubmit: processAddEdit }, // default settings for add
{reloadAfterSubmit: false, jqModal: true, closeOnEscape: true, url: "/Availability/Delete" }, // delete instead that del:false we need this
{closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
{} //{height: 150, jqModal: false, closeOnEscape: true} /* view parameters*/
);
enter code here
As you can see i am using the height: 'auto' so that when the user selects a much higher page count it will span down. I don't have this problem on other jgGrids which are displaying multiple columns. Only jgGrids that have one column shown.
正如您所看到的，我正在使用 height: 'auto' 以便当用户选择更高的页数时，它将向下跨越。我在其他显示多列的 jgGrids 上没有这个问题。仅显示一列的 jgGrids。
回答by Oleg
I tried to reproduce your problem with thisand thisexamples, but I have not the effect which you described. The width of the grid will be correct calculated.
我试图用这个和这个例子重现你的问题，但我没有你描述的效果。网格的宽度将被正确计算。
Probably the problem is in other CSS styles which you use. You can post the full code with the test JSON data which reproduce the problem.
问题可能出在您使用的其他 CSS 样式中。您可以发布带有重现问题的测试 JSON 数据的完整代码。
回答by user1479471
I got perfect Solution finally. I also tried to overcome the problem of horizontal scrollbar issue. Tried diferently in Jquery much time. But the problem is in CSS. In ui-jqgrid.css the table layout is in Fixed. Make it as auto it will work perfectly. I just copied the same class i.e.,
我终于得到了完美的解决方案。我还试图克服水平滚动条问题。在 Jquery 中多次尝试不同。但问题出在 CSS 上。在 ui-jqgrid.css 中，表格布局是固定的。将其设为自动，它将完美运行。我只是复制了同一个类，即
.ui-jqgrid .ui-jqgrid-btable
{
table-layout:auto;
} /* THIS CODE WILL WORK PERFECTLY BEFORE IT WAS IN 'FIXED' VALUE IN THEIR CSS */
回答by pconrey
Looks like this problem may be back. Chrome release v21 on 7/31, and I suddenly started getting the horizontal scrollbar. I am using jqGrid v4.4.0, and a search of the non-minimized code for "webkit" didn't yield any results, so I wasn't able to try Oleg's fix.
看起来这个问题可能又回来了。Chrome 于 7/31 发布 v21，我突然开始获得水平滚动条。我使用的是 jqGrid v4.4.0，搜索“webkit”的非最小化代码没有产生任何结果，所以我无法尝试 Oleg 的修复。
After a little trial and error, a combination of Oleg's solution hereand user1479471's solution worked for me:
经过一些试验和错误后，这里的Oleg 解决方案和 user1479471 的解决方案的组合对我有用：
div.ui-jqgrid-view table.ui-jqgrid-btable {
table-layout:auto;
}
div.ui-jqgrid-view table.ui-jqgrid-htable {
table-layout:auto;
}
回答by emon
Add this style
添加此样式
<style type="text/css">
.ui-jqgrid-bdiv {
overflow-x: hidden !important;
}
</style>
