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

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

введите здесь описание изображения

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

В 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

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


javascript jquery jqgrid
person Billy Logan    schedule 10.02.2011    source источник

Ответы (4)


arrow_upward
5
arrow_downward

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

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

person Oleg    schedule 10.02.2011
comment
Вы были совершенно правы. У меня был стиль для таблицы и td, который устанавливал границу, а также сворачивание границы. Должен был это увидеть. Спасибо за уделенное время! - person Billy Logan; 10.02.2011
comment
@Sarath: ответ уже очень старый и касается горизонтальных полос в Firefox. В моих тестах демоверсии не имеют горизонтальных полос в Firefox 13.0.1 и IE9. Если вы используете Google Chrome, вам необходимо обновить использование jqGrid 3.8.2 до текущей версии 4.4.0 из-за проблемы, описанной здесь. Например, демонстрация аналогична первой, но использует jqGrid 4.4.0. В Google Chrome 20 теперь нет горизонтальных полос. - person Oleg; 08.07.2012
comment
@Oleg Спасибо, что указали мне правильное направление. Моя проблема исправлена. - person Sarath; 08.07.2012

arrow_upward
5
arrow_downward

Наконец-то я получил идеальное решение. Я также пытался решить проблему с горизонтальной полосой прокрутки. Много раз пробовал по разному в 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 */
person user1479471    schedule 25.06.2012

arrow_upward
3
arrow_downward

Похоже, эта проблема может вернуться. Выпуск Chrome v21 от 31 июля, и я внезапно начал получать горизонтальную полосу прокрутки. Я использую 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;
}
person pconrey    schedule 02.08.2012

arrow_upward
0
arrow_downward

Добавить этот стиль

  <style type="text/css">
    .ui-jqgrid-bdiv {
        overflow-x: hidden !important;
    }
  </style>
person emon    schedule 09.10.2019