jqGrid не отображается правильно в Chrome / Chrome Frame



В настоящее время используется Chrome v19.0.1084.46 (официальная сборка 135956) beta-m
jqGrid 4.3.2 (последняя версия)



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



grid



я возился со следующими атрибутами на jqGrid, чтобы попытаться исправить это:




  • width

  • autowidth

  • height

  • shrinkToFit


  • scrollOffset - повезло с этим, но ничего не повторяется.


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



кто-нибудь еще испытал это и/или нашел решение для этого? Помощь очень ценится.

798   8  

8 ответов:

сегодня я обновил свой Chrome до версии 19, воспроизвел проблему и сделал соответствующее быстрое и грязное исправление:

предлагаю поменять строку кода jqGrid

isSafari = $.browser.webkit || $.browser.safari ? true : false;

следующее

isSafari = ($.browser.webkit || $.browser.safari) &&
    parseFloat($.browser.version)<536.5 ? true : false; // Chrome < version 19

демо использовать исправление. Исправлена версия jquery.jqGrid.src.js который я использовал в демо вы можете получить здесь.

я проверял в IE9 (В9.0.8112.16421), в IE8 (8.0.6001.18702 Колорадо), хром 18.0.125.168, Chrome 19.0.1084.46, Safari 5.1.7 (7534.57.2), Firefox 12, Opera 11.62. Во всех веб-браузерах демонстрация не имеет горизонтальных полос прокрутки и выглядит следующим образом:

enter image description here

в будущем было бы лучше изменить расчет ширины сетки более глубоко, чтобы не иметь прямой зависимости от любого номера версии или веб-браузера. Я надеюсь, что это будет возможно, если использовать больше методов jQuery $.ширина и $.outerWidth в некоторых местах jqGrid. В любом случае я надеюсь, что описанное выше исправление будет уже полезно для многих пользователей jqGrid.

обновлено: я написал мое предложение trirand как сообщить об ошибке.

обновлено 2: точно есть три места в коде, где используются одни и те же $.browser.webkit || $.browser.safari построить, как описано выше: внутри setGridWidth,внутри getOffset,внутри расчета ширины на , внутри showHideCol и внутри setGridWidth. Первые три места использует isSafari переменной. Последние два места использует $.browser.webkit || $.browser.safari напрямую. Один должен заменить во всех местах код

$.browser.webkit||$.browser.safari

до

($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5

так что нужно сделать это в три места:

  1. при определении элемент isSafari (видите, я Оригинальный пост)
  2. внутри showHideCol
  3. внутри setGridWidth

вы можете скачать исправленную версию jquery.jqGrid.src со всеми исправлениями здесь. Вы можете внести такие же изменения в код jquery.jqGrid.src сами, если вы должны использовать старую версию jqGrid. Для создания минимизированной версии для производства вы можете использовать любой минимизатор, который вы хорошо знаете. Я использую, например, Microsoft Ajax Minifier 4.0. Просто установить это и исполни

AjaxMin.exe jquery.jqGrid.src-fixed3.js -o jquery.jqGrid.min-fixed3.js

в результате вы получите jquery.jqGrid.min-fixed3.js который будет еще меньше, чем оригинал jquery.jqGrid.min.js. Даже если вы добавите заголовок комментария в файл (см. измененный файл) файл будет еще меньше, чем исходная версия jquery.jqGrid.min.js.

после некоторых итераций моя сообщить об ошибке и улучшение есть еще одна версия исправления, где метод cellWidth было введено:

cellWidth : function () {
    var $testDiv = $("<div class='ui-jqgrid' style='left:10000px'><table class='ui-jqgrid-btable' style='width:5px;'><tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>"),
        testCell = $testDiv.appendTo("body")
            .find("td")
            .width();
        $testDiv.remove();
        return testCell !== 5;
}

посмотреть здесь. Если вы предпочитаете следовать тому, как вы можете сделать это также. В случае, если во всех местах, где isSafari или $.browser.webkit || $.browser.safari (in showHideCol и setGridWidth) используются, вы можете использовать $.jgrid.cellWidth() вместо.

обновлено 3: сегодня был опубликован jqGrid 4.3.3, который содержит исправление, которое я описал выше (cellWidth метод). Поэтому я рекомендую всем использовать новую версию.

обновлено 4: Google Chrome 20 использует WebKit 536.11. Поэтому все, кто не может использовать последнюю версию jqGrid с фиксированным расчетом ширины, должны использовать parseFloat($.browser.version)<536.11 (или некоторые близкие) вместо parseFloat($.browser.version)<536.5 описал в начале ответа. Google Chrome 23 WebKit использует 537.11.

решение Олега сработало для меня.

Я только что отредактировал минимальную версию

49 строчку:

заменить:

м=б.браузера.webkit| / B.браузер.сафари?!0:!1

с:

m=(B.браузер.webkit| / B.браузер.safari)& & parseFloat (b.браузер.версия)

Спасибо за помощь!

ответ Олега правильный. Однако, если вы используете более старую версию jqGrid и хотите применить эти исправления, может быть проще принять изменения непосредственно из diffs на Github. Я успешно протестировал это с помощью jqGrid 4.0.0, поэтому, предположительно, он будет работать на любом из 4.x-серия.

просто начните с первого различия и примените каждый из них по порядку. Это добавит cellWidth функция и внести все необходимые изменения в jquery.jqGrid.src.js файл. Тогда вы можно использовать компилятор закрытия Google, если вы хотите создать уменьшенную версию:

Кажется, что много изменений, но когда вы смотрите на фактический код изменения будут идти очень быстро. Затронуты только несколько исходных строк.

Chrome beta 20.0.1132.11 вышел и сообщает следующее:

User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 Safari/536.11

Я предполагаю, что 536.11 оценивается как

пожалуйста, помогите!

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

У меня была аналогичная проблема несколько месяцев назад с FF, и я использовал опцию ForceFit, которая должна полностью отключить HScroll, но, как вы упомянули, я все равно получу ее, поэтому я просто отключил HScroll для моих сеток forcefit. Несколько обновлений позже FF, это сделал прекратите происходить, и в настоящее время все мои сетки в порядке в Chrome 18, поэтому, надеюсь, это не будет проблемой, когда 19 будет выпущен.

//remove HScroll
function jqGridDisableHScroll(gridid) {
    //if columns are force fit all columns will always fit on screen.
    if ($('#' + gridid).jqGrid('getGridParam', 'forceFit')) {
        var gridview = $('#gview_' + gridid);
        $('.ui-jqgrid-bdiv', gridview).css({ 'overflow-x': 'hidden' });
    }
}

Force Fit

если задано значение true и изменяется ширина столбца, соседний столбец (справа) будет изменяться так, чтобы общая ширина сетки сохранялась (например, уменьшение ширины столбца 2 на 30px увеличит размер столбца 3 на 30px). В этом случае отсутствует горизонтальная скролбар. Примечание: эта опция не совместим с опцией shrinkToFit-т. е. если shrinkToFit имеет значение false, forceFit игнорируется.

просто хотел отметить, что это, вероятно, из-за webkit вопрос 78412 наконец-то решен. По сути, это не будет учитывать границы, и я считаю, что заполнение также при расчете ширины таблиц с фиксированной компоновкой.

Это означало, что jqGrid неправильно вычислит ширину таблицы как только ширину ее области содержимого. Поэтому удаление границ и отступов также должно решить проблему, но вы, вероятно, не захотите этого делать что.

мы используем jgGrid 4.3.3 и cellWidth не решил проблему issue...in чтобы решить ее, я добавил строку return testCell !== 5; на cellWidth метод. Может быть, это не лучшее решение, но оно работает на нас :)

в jQGrid 4.5.2 с Chrome 59.0.3071.115 я изменил функцию cellWidth в сетке.основа.js to:

 return Math.round(testCell) !== 5

Comments

    Ничего не найдено.