Как избавиться от горизонтальной полосы прокрутки, когда она не нужна

Question

У меня есть jqGrid с двумя столбцами, один из которых скрыт.По какой-то причине в FireFox отображается горизонтальная полоса прокрутки, как показано ниже:

, как только я установлю второй столбец, чтобы показать, что полоса прокрутки исчезнет, ​​как показано ниже:

В IE это отображается таким же образом, что допускается добавление вертикальной прокрутки к первому изображению.Думаю, это связано с турником.Если кто-то знает, как избавиться от горизонтальной полосы без установки высоты сетки на что-либо кроме '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

Как вы можете видеть, я использую высоту: 'auto', так что когда пользователь выбирает намного большее количество страниц, он будет уменьшаться.У меня нет этой проблемы на других jgGrids, которые отображают несколько столбцов.Только jgGrids, у которых показан один столбец.

Answer 1

Наконец-то я получил идеальное решение.Я также попытался решить проблему с горизонтальной полосой прокрутки.Попробовал по-разному в Jquery много раз.Но проблема в CSS.В ui-jqgrid.css макет таблицы находится в Fixed.Сделать это как авто, он будет работать отлично.Я просто скопировал тот же класс, т.е.

.ui-jqgrid .ui-jqgrid-btable
{
  table-layout:auto;
}  /* THIS CODE WILL WORK PERFECTLY BEFORE IT WAS IN 'FIXED' VALUE IN THEIR CSS */

Answer 2

Я пытался воспроизвести вашу проблему с этим и этим примерами, но у меня нет эффекта, который вы описалиШирина сетки будет правильно рассчитана.

Возможно, проблема в других стилях CSS, которые вы используете.Вы можете опубликовать полный код с тестовыми данными JSON, которые воспроизводят проблему.

Answer 3

Похоже, эта проблема может вернуться. Выпуск Chrome v21 от 31.07, и я неожиданно начал получать горизонтальную полосу прокрутки. Я использую jqGrid v4.4.0, и поиск не минимизированного кода для "webkit" не дал никаких результатов, поэтому я не смог попробовать исправление Олега.

После небольшой проб и ошибок у меня сработало сочетание решения Олега здесь и решения user1479471:

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

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