jqGrid не отображается правильно в Chrome / Chrome Frame
В настоящее время используется Chrome v19.0.1084.46 (официальная сборка 135956) beta-m
jqGrid 4.3.2 (последняя версия)
проблема в том, что независимо от размера моей сетки, столбцов или содержащего div, небольшая часть моего последнего столбца выталкивается за край сетки, в результате чего появляются горизонтальные полосы прокрутки, что не должно происходить. Смотрите ниже:

я возился со следующими атрибутами на jqGrid, чтобы попытаться исправить это:
widthautowidthheightshrinkToFit
scrollOffset- повезло с этим, но ничего не повторяется.
Я также разделся до базовой сетки css только, думая, что это может быть правило, которое я поставил на место...но безрезультатно.
кто-нибудь еще испытал это и/или нашел решение для этого? Помощь очень ценится.
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. Во всех веб-браузерах демонстрация не имеет горизонтальных полос прокрутки и выглядит следующим образом:
в будущем было бы лучше изменить расчет ширины сетки более глубоко, чтобы не иметь прямой зависимости от любого номера версии или веб-браузера. Я надеюсь, что это будет возможно, если использовать больше методов 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так что нужно сделать это в три места:
- при определении элемент
isSafari(видите, я Оригинальный пост)- внутри
showHideCol- внутри
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(inshowHideColи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