如何擺脫不需要的水平滾動條

我有兩列jqGrid，一個是隱藏的。出於某種原因，在FireFox它示出了水平滾動條象下面這樣：如何擺脫不需要的水平滾動條

enter image description here

只要我設定第二欄，顯示滾動條消失象下面這樣： enter image description here

在IE這以相同的方式顯示接受垂直滾動添加到第一個圖像。認爲這與單槓有關。如果有人知道如何在沒有將網格高度設置爲「自動」以外的任何其他位置的情況下襬脫橫條，請讓我知道。

我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

正如你可以看到我使用的高度：「自動」，這樣，當用戶選擇一個更高的頁面數也將跨越下來。我在其他顯示多列的jgGrid上沒有這個問題。只有顯示了一列的jgGrid。

來源

2011-02-10 Billy Logan

我試圖用this和this的例子重現你的問題，但是我沒有你描述的效果。網格的寬度將被正確計算。

可能問題在於您使用的其他CSS樣式。您可以將完整的代碼發佈到重現問題的測試JSON數據中。

來源

2011-02-10 18:05:07 Oleg

你是完全正確的。我有一個table和td的樣式，它設置邊框以及border-collapse。應該看到了。感謝您的時間！ – 2011-02-10 18:22:38

@比利洛根：不客氣！ – Oleg 2011-02-10 19:11:46

我終於得到了完美的解決方案。我也試圖解決水平滾動條問題。 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 */

來源

2012-06-25 09:03:11 user1479471

貌似這個問題可能會回來。 Chrome在7/31發佈v21，我突然開始獲得水平滾動條。我正在使用jqGrid v4.4.0，並且搜索「webkit」的非最小化代碼沒有得到任何結果，所以我無法嘗試Oleg的修復。

一個小試驗和錯誤的Oleg's solution here和user1479471的解決方案相結合後，爲我工作：

div.ui-jqgrid-view table.ui-jqgrid-btable { 
    table-layout:auto; 
} 

div.ui-jqgrid-view table.ui-jqgrid-htable { 
    table-layout:auto; 
}

來源

2012-08-02 19:33:29 pconrey

如何擺脫不需要的水平滾動條

回答

相關問題