チームに解決できない問題があります:/独自のグリッドコントロールを作成しました。列名の横にあるアイコンをクリックすると、ポップアップdiv(divFilterと呼びます)が表示され、そこでフィルタリングを設定できます。列ごとに動的に生成されたdivがあるため、5つの異なる場所にfe5のdivFilterを配置できます。
それは機能しますが、唯一の問題は、たとえばグリッド上に1〜2レコードがある場合、ポップアップdivが親divの水平スクロールの下に表示されることです。z-indexを試してみましたが、うまくいかないようです。overlay:visibleを設定できますが、水平スクロールも必要です(グリッドには最大50列あります)。私たちはそれを解決できると思ったので、overflow-yvisibleとoverflow-x:scrollを設定して購入しましたが、テストとそのページによると:http ://www.brunildo.org/test/Overflowxy2.htmlそれは不可能です( IE7、IE8)。
この同様の質問CSSoverflow-y:visible、overflow-x:scrollも見つかりましたが、列の下に配置する必要があるため、ポップアップdivはposition:absoluteである必要があります。
アイデアや回避策はありますか?Javascriptを使用せずにCSSのみで設定することも可能ですか(グリッドビューの高さを動的に変更する場合など)。
ありがとう!!
追加した:
わかりました。jsFiddleで問題の非常に単純化されたコードフラグメントを作成しました:http://jsfiddle.net/XL5JD/
<div id="divOuter" style="position: relative; overflow: scroll; height: 100%;">
<div id="divGv" style="height:90px;width:3339px;background-color:#7A8B8B">
<div id="divFilter" style="position:absolute;z-index:20px;background-color:#000000;width:30px;height:300px;margin:10px">
</div>
</div>
</div>
ご覧のとおり、黒いdiv(ポップアップ)は非表示になっているため、コンテンツ全体を表示するには垂直スクロールバーを使用する必要があります。スクロールバーを使用してポップアップ全体を表示するのは見栄えがよくないため、水平スクロールバーの上/上に黒いdivを表示したいのですが、グリッドビュー(中央のdiv)は非常に広い可能性があるため、オーバーフローを設定するだけでは不十分です。 :1番目のdivに表示されます。前に言ったように、位置を固定に変更することは解決策にはなりません。CSSだけではできないとほぼ確信していますが、JavaScriptを台無しにする前に聞いてみたいと思います:)