不要なときに水平スクロールバーを取り除く方法

Question

jqGridに2つの列があり、1つは非表示になっています。 IEこの中

：私は、スクロールバーが離れて以下のようになります表示するために第二のカラムを設定するとすぐに

：Firefoxでいくつかの理由で、水平スクロールバーの下のように示してい同様の表示は、第1の画像に垂直スクロールが追加されたことを受け入れる。これは水平バーと関係があると考えます。グリッドの高さを 'auto'以外に設定せずに横棒を取り除く方法を知っている人は教えてください。

私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にこの問題はありません。 1つの列が表示されているjgGridsのみ。

Answer 1

thisとthisの問題を再現しようとしましたが、記載した効果がありません。グリッドの幅は正しく計算されます。

おそらく問題は、あなたが使用する他のCSSスタイルにあります。問題を再現するテスト用のJSONデータで完全なコードを投稿できます。

Answer 2

私は完璧な解決策を得ました。私はまた、水平スクロールバーの問題の問題を克服しようとしました。多くの時間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 */ 

Answer 3

が見えます。 7/31のChromeリリース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; 
}