jqGrid ne s'affiche pas correctement dans Chrome/Chrome Frame
Utilisation actuelle de Chrome v19.0.1084.46 (version officielle 135956) bêta-m JqGrid 4.3.2 (dernière version)
Le problème est que peu importe la taille de ma grille, de mes colonnes ou de ma division, une petite fraction de ma dernière colonne est poussée au-delà du bord de la grille, ce qui entraîne l'apparition de barres de défilement horizontales, ce qui ne devrait pas se produire. Voir ci-dessous:
J'ai jonglé avec les attributs suivants sur jqGrid pour essayer de résoudre ce problème:
widthautowidthheightshrinkToFitscrollOffset- J'ai eu la meilleure chance avec celui-ci, mais rien ne se répète.
Je me suis aussi concentré uniquement sur le css de base, pensant que c’était peut-être une règle que j’avais mise en place ... sans succès.
Est-ce que quelqu'un d'autre a expérimenté ceci et/ou trouvé une solution à cela? L'aide est très appréciée.
J'ai mis à jour aujourd'hui mon Chrome vers la version 19, j'ai reproduit le problème et effectué le correctif rapide & incorrect correspondant:
Je suggère de changer la ligne du code jqGrid
isSafari = $.browser.webkit || $.browser.safari ? true : false;
au suivant
isSafari = ($.browser.webkit || $.browser.safari) &&
parseFloat($.browser.version)<536.5 ? true : false; // Chrome < version 19
La démo utilise le correctif. La version corrigée de jquery.jqGrid.src.js que j'ai utilisée dans la démo peut être obtenue ici .
Je l'ai testé dans IE9 (v9.0.8112.16421), IE8 (8.0.6001.18702CO), Chrome 18.0.125.168, Chrome 19.0.1084.46, Safari 5.1.7 (7534.57. 2), Firefox 12, Opera 11.62. Dans tous les navigateurs Web, la démo ne comporte pas de barre de défilement horizontale et se présente comme suit:
À l'avenir, il serait préférable de modifier le calcul de la largeur de la grille plus en profondeur pour ne pas avoir de dépendance directe à partir d'un numéro de version ou d'un navigateur Web. J'espère qu'il sera possible d'utiliser davantage de méthodes jQuery $. Width et $. OuterWidth à certains endroits de jqGrid. En tout cas, j'espère que le correctif décrit ci-dessus sera déjà utile pour de nombreux utilisateurs de jqGrid.
MIS À JOUR: J'ai posté ma suggestion de trirand comme le rapport de bogue .
UPDATED 2 : Pour être précis, il existe trois endroits dans le code où sont utilisés la même construction $.browser.webkit || $.browser.safari comme décrit ci-dessus: à l'intérieur de setGridWidth , à l'intérieur de getOffset , à l'intérieur du calcul de la largeur de multiselect colonne, à l'intérieur de showHideCol et - à l'intérieur de setGridWidth . Les trois premières places utilisent la variable isSafari. Les deux derniers endroits utilisent $.browser.webkit || $.browser.safari directement. Il faut remplacer dans tous les endroits le code
$.browser.webkit||$.browser.safari
à
($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5
Donc, il faut le faire dans trois endroits :
- à la définition de la
isSafari(voyez-moi post original) - à l'intérieur de
showHideCol - à l'intérieur de
setGridWidth
Vous pouvez télécharger la version corrigée du jquery.jqGrid.src avec tous les correctifs ici . Vous pouvez apporter les mêmes modifications dans le code de jquery.jqGrid.src si vous devez utiliser l'ancienne version de jqGrid. Pour créer une version réduite pour la production, vous pouvez utiliser n’importe quel minimiseur que vous connaissez bien. J'utilise par exemple Microsoft Ajax Minifier 4.0. Il suffit de l'installer et d'exécuter
AjaxMin.exe jquery.jqGrid.src-fixed3.js -o jquery.jqGrid.min-fixed3.js
Comme résultat, vous aurez jquery.jqGrid.min-fixed3.js qui sera encore plus petit que l'original jquery.jqGrid.min.js. Même si vous ajoutez l'en-tête de commentaire au fichier (voir fichier modifié ), le fichier sera toujours plus petit que la version d'origine de jquery.jqGrid.min.js.
Après quelques itérations de mon rapport de bogue et les améliorations , il existe une version supplémentaire du correctif où la méthode cellWidth a été introduite:
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;
}
Voir ici . Si vous préférez suivre la voie, vous pouvez le faire aussi. Dans tous les cas où isSafari ou $.browser.webkit || $.browser.safari (dans showHideCol et setGridWidth) sont utilisés, vous pouvez utiliser $.jgrid.cellWidth() à la place.
UPDATED 3 : Today a été publié le jqGrid 4.3.3 qui contient le correctif que j'ai décrit ci-dessus (la méthode cellWidth.). Je recommande donc à tous d'utiliser la nouvelle version.
MISE À JOUR 4: Google Chrome 20 utilise WebKit 536.11. Donc, tous ceux qui ne peuvent pas utiliser la dernière version de jqGrid avec le calcul fixe de la largeur doivent utiliser parseFloat($.browser.version)<536.11 (ou un autre proche) au lieu de parseFloat($.browser.version)<536.5 décrit au début de la réponse. Google Chrome 23 WebKit utilise 537.11.
La solution d'Oleg a fonctionné pour moi.
Je viens d'éditer la version min
ligne 49:
remplacé:
m = b.browser.webkit || b.browser.safari?! 0:! 1
avec:
m = (b.browser.webkit || b.browser.safari) && parseFloat (b.browser.version) <536,5?! 0:! 1
Merci pour l'aide!
La réponse d'Oleg est correcte. Cependant, si vous utilisez une ancienne version de jqGrid et souhaitez appliquer ces correctifs, il peut être plus facile de prendre les modifications directement à partir des diffs de Github. J'ai testé cela avec succès avec jqGrid 4.0.0, donc cela fonctionnera vraisemblablement avec toutes les séries 4.x.
Commencez simplement par le premier diff et appliquez chacun d'entre eux dans l'ordre. Cela ajoutera la fonction cellWidth et apportera toutes les modifications nécessaires au fichier jquery.jqGrid.src.js. Ensuite, vous pouvez utiliser le compilateur de fermeture Google si vous souhaitez créer une version réduite:
Il semble y avoir beaucoup de changements, mais quand vous regardez le code réel, les changements vont très vite. Seules quelques lignes source sont affectées.
Chrome beta 20.0.1132.11 est sorti et rapporte ce qui suit:
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 Safari/536.11
J'imagine que 536.11 est évalué à <536.5 en raison d'une comparaison numérique/texte empêchant le correctif de fonctionner?
S'il vous plaît aider!
Mise à jour: Ma réponse fait référence à un problème similaire survenu il y a quelques mois dans Firefox. J'ai suggéré, dans l'espoir que cela fonctionnerait pour Chrome 19, mais pour le moment, la réponse d'Oleg est la bonne approche.
J'avais un problème similaire il y a quelques mois avec FF et j'utilisais l'option ForceFit qui devrait désactiver complètement le HScroll, mais comme vous l'avez mentionné, je l'obtiendrais quand même. J'ai simplement désactivé HScroll pour mes grilles Forcefit. Quelques mises à jour plus tard de FF, cela ne s'est pas produit et, actuellement, toutes mes grilles fonctionnent correctement dans Chrome 18. J'espère que le problème ne se posera pas lorsque 19 sera disponible.
//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
Si elle est définie sur true et que la largeur d’une colonne est redimensionnée, la colonne adjacente (à droite) sera redimensionnée de sorte que la largeur de la grille globale soit conservée (par exemple, une réduction de 30px de la largeur de la colonne 2 augmente la taille de la colonne 3 de 30px). Dans ce cas, il n'y a pas de scrolbar horizontal. Remarque: cette option n'est pas compatible avec l'option shrinkToFit. Par exemple, si shrinkToFit est défini sur false, forceFit est ignoré.
Nous utilisons jgGrid 4.3.3 et cellWidth n'a pas résolu le problème ... afin de le résoudre, j'ai ajouté la ligne return parseInt(testCell) !== 5; au lieu de return testCell !== 5; dans la méthode cellWidth. Peut-être que ce n'est pas la meilleure solution, mais cela fonctionne pour nous :)
Je voulais juste souligner que cela est probablement dû à webkit numéro 78412 enfin en cours de résolution. Essentiellement, cela ne prendrait pas en compte les bordures, et je crois aussi le remplissage, lors du calcul de la largeur des tableaux avec une disposition fixe.
Cela signifiait que jqGrid ne calculerait pas correctement la largeur de la table, mais uniquement celle de sa zone de contenu. Donc, supprimer les bordures et le rembourrage devrait également résoudre le problème, mais vous ne voudriez probablement pas le faire.
Dans jQGrid 4.5.2 avec Chrome 59.0.3071.115, j'ai modifié la fonction cellWidth dans grid.base.js en:
return Math.round(testCell) !== 5