jqGrid ne s'affiche pas correctement dans Chrome / Chrome Frame

Question

Actuellement à l'aide de Chrome v19.0.1084.46 (compilation Officiel 135956) beta-m jqGrid 4.3.2 (dernière version)

Le problème, c'est que peu importe la taille de ma grille, des colonnes, ou contenant de la div, une petite partie de ma dernière colonne est poussé au-delà du bord de la grille, causant des barres de défilement horizontales apparaissent, qui ne devrait pas arriver. Voir ci-dessous:

J'ai été de jongler avec les attributs suivants de jqGrid pour essayer de résoudre ce:

• width
• autowidth
• height
• shrinkToFit
• scrollOffset - A eu la meilleure chance avec celui-ci, mais rien de répétitif.

J'ai aussi dépouillé vers le bas à la base de la grille css, pensant qu'il pourrait avoir été une règle que j'ai mis en place...avec pas de chance.

Quelqu'un d'autre a fait l'expérience et/ou trouvé une solution à cela? L'aide est très apprécié.

Answer 1

J'ai mis à jour aujourd'hui, mon Chrome à la version 19, ont reproduit le problème et fait la quick&dirty corrigé:

Je suggère de modifier la ligne de code jqGrid

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

à la suite de

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

La démo d'utiliser le correctif. La version fixe de jquery.jqGrid.src.js que j'ai utilisé dans la démo, vous pouvez obtenir ici.

Je l'ai testé dans IE9 (v9.0.8112.16421), IE8 (8.0.6001.18702 CO), 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 n'a pas de barres de défilement horizontale et il semble comme suit:

Dans l'avenir, il serait préférable de modifier le calcul de la largeur de la grille au plus profond de n'avoir aucune dépendance directe de tout numéro de version ou un navigateur web. J'espère que ce sera possible si l'on aurait recours à d'autres méthodes jQuery $.largeur et $.outerWidth dans certains endroits de jqGrid. De toute façon, j'espère que la décrit ci-dessus correctif serait déjà utile pour de nombreux jqGrid utilisateurs.

Mise à JOUR: j'ai posté ma suggestion pour trirand que le rapport de bug.

Mise à JOUR 2: Pour être exactement il y a trois endroits dans le code où sont utilisés de la même $.browser.webkit || $.browser.safari construire comme décrit ci-dessus: l'intérieur de setGridWidth, à l'intérieur de getOffset, à l'intérieur du calcul de la largeur de l' multiselect colonne, à l'intérieur de showHideCol et à l'intérieur de setGridWidth. Les trois premières places utilisations isSafari variable. Les deux dernières places utilisations $.browser.webkit || $.browser.safari directement. L'on doit remplacer dans tous les endroits du code

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

pour

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

Donc, il faut le faire en trois endroits:

1. à la définition de l' isSafari (me voir post original)
2. à l'intérieur de l' showHideCol
3. à l'intérieur de l' setGridWidth

Vous pouvez télécharger la version corrigée de l' jquery.jqGrid.src avec tous les correctifs ici. Vous pouvez faire les mêmes changements dans le code de l' jquery.jqGrid.src vous-même si vous devez utiliser l'ancienne version de jqGrid. Pour créer version réduite de la production, vous pouvez utiliser n'importe quel minimizer qui vous savez. J'utilise par exemple Microsoft Ajax Minifier 4.0. Il suffit de l'installer et de l'exécuter

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

Comme résultat, vous obtiendrez jquery.jqGrid.min-fixed3.js ce qui sera encore plus petits que les originaux jquery.jqGrid.min.js. Même si vous ajoutez le commentaire d'en-tête du fichier (voir le fichier modifié) le fichier sera toujours plus petite que la version originale de l' jquery.jqGrid.min.js.

Après quelques itérations de mon rapport de bug et améliorations il y a encore une version du correctif où la méthode cellWidth a été introduit:

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 façon dont vous pouvez le faire aussi. Dans le cas dans tous les lieux où l' isSafari ou $.browser.webkit || $.browser.safari (en showHideCol et setGridWidth) sont utilisés, vous pouvez utiliser $.jgrid.cellWidth() à la place.

Mise à JOUR 3: aujourd'Hui a été publié jqGrid 4.3.3 qui contient le correctif que j'ai décrite ci-dessus (l' cellWidth méthode). Donc, je recommande à tous d'utiliser la nouvelle version.

Mise à JOUR 4: Google Chrome 20 utilise WebKit 536.11. Donc tout le monde qui ne peuvent pas utiliser la dernière version de jqGrid avec le fixe de calcul de la largeur doit utiliser parseFloat($.browser.version)<536.11 (ou fermer) au lieu de parseFloat($.browser.version)<536.5 décrit au début de la réponse. Google Chrome 23 WebKit utilise 537.11.

Answer 2

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!

Answer 3

Oleg réponse est bonne. Toutefois, si vous utilisez une ancienne version de jqGrid et pour appliquer ces correctifs, il peut être plus facile de prendre directement les modifications de la diff sur Github. J'ai testé avec succès à l'aide de jqGrid 4.0.0, donc on peut supposer qu'il va travailler sur l'une des 4.x de la série.

Juste de commencer avec la première diff et s'appliquent à chacun d'eux dans l'ordre. Cela va ajouter de l' cellWidth de la fonction et de faire tous les changements nécessaires à travers les jquery.jqGrid.src.js fichier. Ensuite, vous pouvez utiliser le Google closure compiler si vous souhaitez créer une version minifiée:

• 8c56dc8
• b50b55f
• cf26b2c
• 8d7eff0
• 46a14ce

Il semble que beaucoup de changements, mais quand vous regardez le code réel les changements vont aller très vite. Seulement quelques lignes de source sont affectés.

Answer 4

oh oh - c'est cassé encore. Chrome beta 20.0.1132.11 est sorti et rapporte ce qui suit:

Agent utilisateur: Mozilla / 5.0 (Windows NT 5.1) AppleWebKit / 536.11 (KHTML, comme 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?

Oleg - aide!

Answer 5

Mise à jour: Mon anwswer se réfère à un problème similaire qui s'est passé dans Firefox il y a quelques mois et je l'ai suggéré dans l'espoir qu'elle serait travailler pour google Chrome 19, mais actuellement, Oleg réponse est la bonne approche.

J'ai eu un problème similaire il y a quelques mois avec FF et j'ai été en utilisant le ForceFit option qui devrait désactiver les propriétés hscroll entièrement mais comme vous l'avez mentionné, je voudrais quand même, alors j'ai juste désactivé les propriétés hscroll pour mon forcefit grilles. Quelques mises à jour plus tard de FF, il fait arrêter de passe, et actuellement, toutes mes grilles sont bien dans Chrome 18 alors j'espère que ce ne sera pas un problème lors de la 19 est sorti.

//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' });
    }
}

La Force De L'Ajustement

Si défini à true, et le redimensionnement de la largeur d'une colonne, la colonne adjacente (vers la droite) redimensionner, de sorte que l'ensemble de la largeur de la grille est maintenue (par exemple, réduction de la largeur de la colonne 2 par 30px d'augmenter la taille de la colonne 3 par 30px). Dans ce cas, il n'est pas horizontale scrolbar. Remarque: cette option n'est pas compatible avec shrinkToFit option - je.e si shrinkToFit est définie sur false, forceFit est ignoré.