0

これはおそらく、CSS (または KoGrid) の専門家 (私もそうではない) にとっては簡単な質問です。設定は Knockout と JQuery を使用した 1 対多の KoGrids を使用した Web ページです。グリッドは一度に 1 つだけ「display:block」です。他はすべて「display:hidden」です。

ユーザーがブラウザ ウィンドウのサイズを変更すると、非表示のグリッドの kgTopPanel、kgViewport、および kgFooterPanel 領域の幅が「0」に設定されます。その後、ユーザーがリンクをクリックして以前に非表示になっていたグリッドをアクティブにすると、幅が復元されず、ブラウザ ウィンドウのサイズを再度変更して表示する必要があります。何時間もかけて、それを回避する方法として以下のハックを見つけましたが、それは醜いです。

ハックなしでこれを修正するエレガントな方法はありますか? そもそもこれらの幅がゼロに設定されるのを防ぐことはできますか? 私は CSS の専門家ではなく、ずっと前に知識を使い果たしました。丸一日かけて Web を検索し、さまざまなことを試しましたが、最終的には答えが見つかりませんでした。

以下のコード スニペットでは、「domPanel」はすべてのグリッドを含む div です。「domObject」は、オンにしたい 1 つのグリッドです。

<div id='Grid1' data-bind="koGrid: g1.GridOptions"></div>
<div id='Grid2' data-bind="koGrid: g2.GridOptions"></div>
...
domTabPanel.children().css('display', 'none');
domObject.css('display', 'block');
// Hack to restore the widths.  If you resize the page
// when another tab is visible, all the widths will have been set to 0.
domObject.find(".kgTopPanel").css("width", "inherit");
domObject.find(".kgTopPanel").children().css("width", "inherit");
domObject.find(".kgViewport").css("width", "inherit");
domObject.find(".kgViewport").children().css("width", "inherit");
domObject.find(".kgFooterPanel").css("width", "inherit");
domObject.find(".kgFooterPanel").children().css("width", "inherit");

PS: この問題は IE と Chrome の両方で発生するため、おそらくすべてのブラウザが影響を受けると思います。

4

1 に答える 1

1

要素が を受け取るdisplay: noneと、JavaScript でそのサイズを取得すると、幅と高さがゼロになります。おそらく、幅と高さを読み取り、それをプログラムで処理するコード (koGrid 内) がいくつかあります。ただし、関連するコードが投稿に含まれていないため、より具体的にするのは困難です.

可能な修正は、 を使用しないことdisplay: noneですが、非表示のグリッドに絶対位置を指定し、ページから非常に遠くにオフセットすることで、非表示のグリッドを「非表示」にします。これを行うには、次のようなスタイルのクラスを提供します。

.my-invisible-class {
    position: absolute;
    left: -9999px;
}

このようにして、それらは見えないように隠されていますが、実際にはまだ無傷です。それらの幅と高さは安定したままでなければなりません。

于 2013-11-13T12:02:03.783 に答える