wake-up-neo.com

in Chrome/Chrome Frame wird jqGrid nicht richtig gerendert

Derzeit wird Chrome v19.0.1084.46 (Official Build 135956) verwendet. Beta-m JqGrid 4.3.2 (neueste Version)

Das Problem ist, dass unabhängig von der Größe meines Gitters, von Spalten oder von div ein kleiner Teil meiner letzten Spalte über den Rand des Gitters hinaus geschoben wird, wodurch horizontale Bildlaufleisten angezeigt werden, die nicht auftreten sollten. Siehe unten:

grid

Ich habe mit den folgenden Attributen in jqGrid herumgespielt, um das Problem zu beheben:

  • width
  • autowidth
  • height
  • shrinkToFit
  • scrollOffset - hatte das beste Glück mit diesem, aber nichts Wiederholbares.

Ich habe mich auch nur auf das grundlegende Raster css beschränkt und dachte, es könnte eine Regel gewesen sein, die ich eingeführt habe ... ohne Glück.

Hat jemand anderes dies erlebt und/oder eine Lösung dafür gefunden? Hilfe wird sehr geschätzt.

51
IronicMuffin

Ich habe heute mein Chrome auf Version 19 aktualisiert, das Problem reproduziert und die entsprechende schnelle und fehlerhafte Lösung vorgenommen:

Ich schlage vor, die Zeile von jqGrid-Code zu ändern

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

zu dem Folgendem

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

Die Demo benutze den Fix. Die feste Version von jquery.jqGrid.src.js, die ich in der Demo verwendet habe, erhalten Sie hier .

Ich habe es in 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 getestet. 2), Firefox 12, Opera 11.62. In allen Webbrowsern verfügt die Demo über keine horizontalen Bildlaufleisten und sieht folgendermaßen aus:

enter image description here

In Zukunft ist es besser, die Berechnung der Breite des Rasters tiefer zu ändern, um keine direkte Abhängigkeit von einer Versionsnummer oder einem Webbrowser zu haben. Ich hoffe, es wird möglich sein, wenn man an einigen Stellen von jqGrid mehr jQuery-Methoden $. Width und $. OuterWidth verwenden würde. In jedem Fall hoffe ich, dass das oben beschriebene Update bereits für viele jqGrid-Benutzer hilfreich wäre.

UPDATED: Ich habe meinen Vorschlag an trirand als der Fehlerbericht gepostet.

AKTUALISIERT 2 : Um genau zu sein, gibt es drei Stellen im Code, an denen dasselbe $.browser.webkit || $.browser.safari -Konstrukt wie oben beschrieben verwendet wird: innerhalb von setGridWidth , innerhalb von getOffset , innerhalb der Berechnung der Breite der multiselect -Spalte, innerhalb von showHideCol und - innerhalb von setGridWidth . Die ersten drei Stellen verwenden die Variable isSafari. Die letzten beiden Stellen verwenden $.browser.webkit || $.browser.safari direkt. Man sollte an allen Stellen den Code ersetzen

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

zu

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

Also sollte man dies an drei Stellen tun :

  1. bei der Definition des isSafari (siehe Originalbeitrag)
  2. innerhalb von showHideCol
  3. innerhalb von setGridWidth

Sie können die feste Version des jquery.jqGrid.src mit allen Korrekturen herunterladen hier . Sie können die gleichen Änderungen im Code von jquery.jqGrid.src selbst vornehmen, wenn Sie eine alte Version von jqGrid verwenden müssen. Um eine minimierte Version für die Produktion zu erstellen, können Sie jeden bekannten Minimierer verwenden. Ich benutze zum Beispiel Microsoft Ajax Minifier 4.0. Einfach installieren und ausführen

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

Als Ergebnis erhalten Sie jquery.jqGrid.min-fixed3.js , das noch kleiner als das ursprüngliche jquery.jqGrid.min.js ist. Selbst wenn Sie den Kommentar-Header zur Datei hinzufügen (siehe geänderte Datei ), ist die Datei immer noch kleiner als die Originalversion von jquery.jqGrid.min.js.

Nach einigen Iterationen meines Fehlerbericht und der Verbesserungen gibt es eine weitere Version des Fixes, in der die Methode cellWidth eingeführt wurde:

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;
}

Siehe hier . Wenn Sie es vorziehen, dem Weg zu folgen, können Sie dies auch tun. In allen Fällen, in denen isSafari oder $.browser.webkit || $.browser.safari (in showHideCol und setGridWidth) verwendet werden, können Sie stattdessen $.jgrid.cellWidth() verwenden.

AKTUALISIERT 3 : Heute wurde jqGrid 4.3.3 veröffentlicht, das das oben beschriebene Update enthält (die cellWidth -Methode). Daher empfehle ich allen, die neue Version zu verwenden.

AKTUALISIERT 4: Google Chrome 20 verwendet WebKit 536.11. Daher sollte jeder, der die letzte Version von jqGrid mit der festen Berechnung der Breite nicht verwenden kann, parseFloat($.browser.version)<536.11 (oder einen ähnlichen Wert) anstelle von parseFloat($.browser.version)<536.5 verwenden, der zu Beginn der Antwort beschrieben wurde. Google Chrome 23 WebKit verwendet 537.11.

63
Oleg

Olegs Lösung hat für mich funktioniert.

Ich habe gerade die Min-Version bearbeitet 

zeile 49:

ersetzt:

m = b.browser.webkit || b.browser.safari?! 0:! 1

mit:

m = (b.browser.webkit || b.browser.safari) && parseFloat (b.browser.version) <536.5?! 0:! 1

Danke für die Hilfe!

3
user1399332

Olegs Antwort ist richtig. Wenn Sie jedoch eine ältere Version von jqGrid verwenden und diese Fixes anwenden möchten, ist es möglicherweise einfacher, die Änderungen direkt aus den diffs von Github zu übernehmen. Ich habe dies mit jqGrid 4.0.0 erfolgreich getestet, daher wird es vermutlich mit jeder der 4.x-Serie funktionieren.

Fange einfach mit dem ersten Vergleich an und wende jeden der Reihe nach an. Dadurch wird die cellWidth-Funktion hinzugefügt und alle erforderlichen Änderungen in der Datei jquery.jqGrid.src.js vorgenommen. Dann können Sie den Google-Closure-Compiler verwenden, wenn Sie eine reduzierte Version erstellen möchten:

Es scheint viele Änderungen zu sein, aber wenn Sie sich den Code ansehen, werden die Änderungen sehr schnell vonstatten gehen. Es sind nur wenige Quellzeilen betroffen.

3
Justin Ethier

Die Chrome-Beta 20.0.1132.11 ist erschienen und meldet Folgendes:

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

Ich vermute, dass 536.11 als <536.5 bewertet wird, weil der Vergleich von Zahlen und Text dazu führt, dass der Patch nicht funktionsfähig ist?

Bitte helfen

3
johnmac

Update: Meine Antwort bezieht sich auf ein ähnliches Problem, das vor einigen Monaten in Firefox aufgetreten ist, und ich schlug in der Hoffnung vor, dass es für Chrome 19 funktionieren würde, aber derzeit ist die Antwort von Oleg der richtige Ansatz.

Ich hatte vor einigen Monaten ein ähnliches Problem mit FF und verwendete die ForceFit-Option, die die HScroll-Funktion vollständig deaktivieren sollte. Wie Sie jedoch bereits erwähnt haben, würde ich sie immer noch erhalten, also habe ich die HScroll-Funktion für meine ForceFit-Gitter deaktiviert. Ein paar Updates später von FF, es hat aufgehört zu geschehen, und momentan sind alle meine Gitter in Chrome 18 in Ordnung, also wird es hoffentlich kein Problem sein, wenn 19 veröffentlicht wird.

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

Kraftschluss

Wenn der Wert auf true gesetzt ist und die Breite einer Spalte geändert wird, wird die Größe der angrenzenden Spalte (rechts) geändert, sodass die Gesamtgitterbreite erhalten bleibt. Wenn Sie beispielsweise die Breite der Spalte 2 um 30 Pixel verringern, wird die Größe der Spalte 3 um 1 erhöht 30px). In diesem Fall gibt es keine horizontale Scrolbar. Hinweis: Diese Option ist nicht mit der Option shrinkToFit kompatibel - d. H. Falls shrinkToFit auf false gesetzt ist, wird forceFit ignoriert.

1
Chad Ferguson

Wir verwenden jgGrid 4.3.3 und cellWidth hat das Problem nicht gelöst ... Um das Problem zu lösen, habe ich die Zeile return parseInt(testCell) !== 5; statt return testCell !== 5; in der cellWidth-Methode hinzugefügt. Vielleicht ist es nicht die beste Lösung, aber es funktioniert für uns :)

1
Alex Dn

Ich wollte nur darauf hinweisen, dass dies wahrscheinlich darauf zurückzuführen ist, dass das Webkit Ausgabe 78412 endgültig gelöst wurde. Im Wesentlichen würde es keine Grenzen berücksichtigen, und ich glaube auch die Auffüllung, wenn Sie die Breite von Tabellen mit festem Layout berechnen. 

Dies bedeutete, dass jqGrid die Breite der Tabelle nur als Breite des Inhaltsbereichs falsch berechnet hat. Das Entfernen der Umrandungen und des Auffüllens sollte das Problem ebenfalls lösen, aber das möchten Sie wahrscheinlich nicht.

1
Nadir Muzaffar

In jQGrid 4.5.2 mit Chrome 59.0.3071.115 habe ich die cellWidth-Funktion in grid.base.js folgendermaßen geändert:

 return Math.round(testCell) !== 5
0
alsco77