2

クロムでのインライン編集で jqGrid を使用すると、奇妙なバグに気付きました。行が選択されると、垂直パディングは毎回 1 ピクセルまたは 2 ピクセルずつ大きくなります。何が原因なのかはわかりませんが、簡単な例に要約することができました:

http://jsfiddle.net/3mrKD/

更新: jqGrid を使用しない単純なバージョン: http://jsfiddle.net/3mrKD/9/

2 つの行の間を前後にクリックすると、各行の高さを無限に伸ばすことができます。Chrome のインスペクターは余分なスペースをパディングとして表示しますが、サイズがメトリクス インスペクターの値と一致しません。

これは、Windows と Mac の両方の最新バージョンの Chrome (26.0.1410.64 m) で確実に再現できますが、Firefox、IE 9 または 10、または Safari のどのバージョンでも再現できません。

これは、私が使用しているライブラリのバグのように見えますか? クロムで？

余分な垂直方向の余白のあるテーブル セル

HTML:

<table id="grid"></table>

CSS:

td { vertical-align: baseline; }

JavaScript:

var lastSelected;

$("#grid").jqGrid({
    datatype: "local",
    data: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
    colModel: [
        {
            name: 'id'
        },
        {
            name: 'name',
            editable: true
        }
    ],
    onSelectRow: function(id) {
        if (id && id !== lastSelected) {
            $("#grid").jqGrid('restoreRow', lastSelected);
            $("#grid").jqGrid('editRow', id, true);
            lastSelected = id;
        }
    },
});
4

2 に答える 2

2

興味深い質問です。これは Google Chrome のバグだと思います: の高さを<td>間違った方法で計算します。問題を軽減するために、行編集の開始時にリセットvertical-alignすることをお勧めします。middleの追加style="vertical-align:middle"属性が含まれます<td>。編集の最後に、属性を削除できます。

修正されたデモで結果を見ることができます。デモでは、編集の開始時に行の高さを 1px に増やしていますが、他の CSS 属性で遊んだ後、効果を排除できると思います。デモで使用したコードは以下

var lastSelected,
    removeVerticalAlignBaseline = function (rowid) {
        var tr = $(this).jqGrid("getInd", rowid, true),
            $tds = $(tr).find(">td:has(>input)");
        $(tr).find(">td:has(>input)").each(function () {
            this.style.verticalAlign = "middle";
        });
    },
    resetVerticalAlignBaseline = function (rowid) {
        var tr = $(this).jqGrid("getInd", rowid, true),
            $tds = $(tr).find(">td");
        $(tr).find(">td:has(>input)").each(function () {
            this.style.verticalAlign = ""; // remove the style
            // now the style from CSS will be used
        });
    },
    editOptions = {
        keys: true,
        oneditfunc: removeVerticalAlignBaseline,
        aftersavefunc: resetVerticalAlignBaseline,
        afterrestorefunc: resetVerticalAlignBaseline,
    };

$("#grid").jqGrid({
    datatype: "local",
    data: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
    colModel: [
        { name: 'id' },
        { name: 'name', editable: true }
    ],
    onSelectRow: function(id) {
        if (id && id !== lastSelected) {
            $(this).jqGrid('restoreRow', lastSelected, editOptions);
            $(this).jqGrid('editRow', id, editOptions);
            lastSelected = id;
        }
    },
    height: "auto"
});
于 2013-05-21T18:14:03.043 に答える
1

これは chrome (およびwebkit ) のバグであることが判明しました。私が最終的に使用した修正（リンクされたバグで提案されている他の修正があります）は次のとおりです。

div.ui-jqgrid td {
    vertical-align: middle;
}

私が持っていた垂直整列の以前の宣言は、一般的な CSS リセットからのものだったので、問題があったところで上書きしました。

于 2013-05-22T20:30:12.603 に答える