Ненужная горизонтальная полоса прокрутки jqGrid

Question

В моем jqGrid (с использованием версии 4.0.0) я получаю ненужную горизонтальную полосу прокрутки, но когда есть и вертикальная полоса прокрутки. Эта проблема возникает только в Chrome и Firefox, но не в Internet Explorer.

Кажется, что с вычислением ширины таблицы что-то не так, потому что горизонтальная прокрутка составляет всего один или два пикселя. Я использую autowidth: true в качестве свойства таблицы для ширины. Всего около восьми столбцов, некоторые имеют фиксированную ширину (очень маленькую), другие имеют динамическую ширину.

Отключение горизонтальной прокрутки вообще не является решением, поскольку пользователи все еще могут увеличивать определенные столбцы, а затем необходима горизонтальная полоса прокрутки. Но сначала я хочу, чтобы он загружался со столбцами, выровненными по ширине таблицы, и вертикальной полосой прокрутки, когда это необходимо для отображения таблицы на меньших экранах.

Ниже приведен фрагмент свойств сетки в коде

    $("#grid").jqGrid({
    datatype: 'json',
    mtype: 'POST',
    colNames:loadColumns(columns)[0],
    colModel:loadColumns(columns)[1],
    height: $(window).height() - 160,
    rownumbers: false,
    pager: '#pager',
    rowNum:25,
    rowList:[25,50,100],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    autowidth: true,
    beforeSelectRow: function(){
        return false;
    },
});

Answer 1

Вы должны убедиться, что у вас нет какой-либо настройки таблицы в вашем CSS.

Например, в моем предложении здесь Я описал, что стандартный CSS проекта ASP.NET MVC (все версии от 1.0 до 3.0) включают в себя следующие параметры:

table
{
    border: solid 1px #e8eef4;
    border-collapse: collapse;
}
table td
{
    padding: 5px;
    border: solid 1px #e8eef4;
}

Этот параметр не учитывается при расчете оптимальной ширины сетки.Если вы удалите настройки или добавите следующие дополнительные настройки

div.ui-jqgrid-view table.ui-jqgrid-btable
{
    border-style:none;
    border-top-style:none;
    border-collapse:separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable td
{
    border-left-style:none
}
div.ui-jqgrid-view table.ui-jqgrid-htable
{
    border-style:none;
    border-top-style:none;
    border-collapse:separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable th
{
    border-left-style:none
}

, проблема с горизонтальными полосами прокрутки будет решена.

Если вы не используете ASP.NET MVC, проблема может бытьдругая причина, но я бы порекомендовал вам искать любое определение CSS для table, td или th.

Answer 2

Я добавил этот код в файл CSS "ui.jqgrid.css", и горизонтальная полоса прокрутки больше не появляется:

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

Answer 3

Для меня, прежде всего, решение было это после загрузки сетки:

$("#gridtofix").closest('.ui-jqgrid-bdiv').width($("#gridtofix").closest('.ui-jqgrid-bdiv').width() + 1);