- PR -

GridViewで固定したヘッダーの表示位置

1|2 次のページへ»
投稿者投稿内容
Ｑ
ベテラン
会議室デビュー日: 2006/11/10
投稿数: 64
投稿日時: 2009-01-13 15:52
お世話になっております。

WINXP、VS2008(C#)、IE6.0で開発しております。

サンプルサイトを参考に、
CSSを使ってGridViewのヘッダー固定を実装しましたが、
テンプレート列にドロップダウンリストを設置すると、スクロールした際に
ドロップダウンリストがヘッダーの上に重なってしまいます。
テキストボックスやラベルの場合は平気なのですが、この問題は解決可能なのでしょうか？

CSSは以下の通りです。
.Freezing
{
z-index:10;
position:relative;
top:expression(this.offsetParent.scrollTop);
}
これを、GridViewのHeaderStyleに設定してます。

z-indexを変えてみても変わりません。
どなたか教えていただけませんでしょうか。
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2009-01-14 05:36
IE6のバグなのでは？

IE7, IE8(beta)でも再現しますか？

ちなみに、Firefox, Safari, chromeではどうですか？
_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
Ｑ
ベテラン
会議室デビュー日: 2006/11/10
投稿数: 64
投稿日時: 2009-01-14 11:58
Accessさん、お返事ありがとうございます。

IE7では、理想通りドロップダウンもヘッダーの背面を通過しました。
Firefox, Safari, chromeでは、CSSが利いてないようで、ヘッダー固定自体が無効でした。

他のアプリの都合でIE6もまだ多く、この現象なんとか回避できないかと、
情報探してますが、なかなか見つからない状態です。。
http://d.hatena.ne.jp/kumat/20060124/
こちらの方は回避されているようなのですが、いまいち方法が分からなくて。

見た目の問題なので、最悪はこのままという選択肢もあるのですが・・・

ぱると
会議室デビュー日: 2006/12/21
投稿数: 17
投稿日時: 2009-01-14 13:59
ヘッダと同じ大きさで同じ場所に
<iframe>を配置すると良いみたいですよ。
z-indexはヘッダ＞iframe＞ドロップダウンリスト
にすれば良いみたいです。
Ｑ
ベテラン
会議室デビュー日: 2006/11/10
投稿数: 64
投稿日時: 2009-01-14 15:58
ぱるとさん、お返事ありがとうございます。

すみません、iframeの用途がよく分かってないかもしれません・・・
iframeは、その中に別のページを表示するものとして認識しているのですが、
この場合は、src属性など無しで配置するということでしょうか？

下記のソースのいくつかの場所に配置して試したのですが、ビルドエラーや期待した動作になりませんでした。
※下記ソースは構成のみで、属性などは省いてます。
<div style="overflow:auto; height: 500px;">
<asp:GridView>
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList></asp:DropDownList>
</ItemTemplate>
<HeaderStyle />
<ItemStyle />
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="Freezing" />
</asp:GridView>
</div>

この場合、<asp:GridView></asp:GridView>の外側に囲むように配置するということでしょうか？
<asp:GridView>の中に配置すると、GridViewにそのようなプロパティが無いということで
ビルドエラーになってしまいました。

どのような配置になるか教えて頂けると助かります。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2009-01-14 20:10
ヘッダ＞ＩＦＲＡＭＥ＞テーブル　の順です。

ヘッダはＣＳＳで浮いているのでz-index により階層指定してあげれば
その下に IFRAME をもぐりこませることができます。

スクリプトで ヘッダの大きさと表示位置を取得してそれと同じ大きさで
透明度１％のＩＦＲＡＭＥをヘッダの後ろに配置すれば、コンテンツに
表示されているリストＢＯＸがヘッダの上に来ないように出来ます。

スクリプトで動的にＩＦＲＡＭＥを生成するので、src 属性は指定しなくても
かまいません。敢えて指定するのであれば、サイズ０の loading.html なりを
作ってこいつを指定するようにします。

ＩＥ６の直ら（さ？）ない仕様らしいのでこれで対応してみてください。

コード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD> 

<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<TITLE></TITLE>

</HEAD>

<BODY>

<style>

.Freezing 

{ 

z-index:10; 

position:relative; 

top:expression(this.offsetParent.scrollTop);

left:expression(0);

Qbackground-color:orange;

} 

</style>



<div style="height:200px;overflow:auto;width:300px;" id="div1">

<script>



window.onload = function() {

  var fr = document.createElement("iframe");

  var tb = document.getElementById("table1");

  var dv = document.getElementById("div1");

  var header = tb.rows[0];

  var w = header.offsetWidth;

  var h = header.offsetHeight;

  

  fr.style.width = w + "px";

  fr.style.height = h + "px";

  fr.style.zIndex = 8;

  fr.style.position = "absolute";

  fr.style.top = 0;

  fr.style.left = 0;

  fr.style.border = "solid 1px blue";

  fr.frameBorder = 0;

  fr.scrolling= "no";

  

  div1.appendChild(fr);



  fr.contentWindow.document.write("<body bgcolor=red></body>");



//このコメントを付けたりはずしたりして試せ。

/*

  div1.onscroll = function() {

    fr.style.top = this.scrollTop + "px";

    window.status = this.scrollTop;

  }

*/

}



</script>

<table border width="100%" id="table1">

<tr class="Freezing"><th>ヘッダ</th><th>固定</th></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td><select><option>23</option></select></td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

<tr><td>aaa</td><td>123</td></tr>

</table>

</div>

</BODY>

</HTML>



若干無理があるかな・・・

まぁ、これを自分のコードに応用できるならやってみてくだされ。
わからないならどこがわからんのか指摘くだされ。
まずは、全部コピって試してみるがよろし。


追記：ＩＦＲＡＭＥの上１ピクセル空いちゃうから、scrollTop-1 した
方がいいのかな・・・


[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2009-01-14 20:39 ]

[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2009-01-14 20:47 ]
Ｑ
ベテラン
会議室デビュー日: 2006/11/10
投稿数: 64
投稿日時: 2009-01-15 11:32
ぴあちゃんさん、サンプルまで提示して頂き、ありがとうございます。

サンプルでの動作、確認できました！！

JavaScriptの解析と応用はこれからになりますので、少々お時間ください。

でき次第、ご連絡しますので！

みやぼん
会議室デビュー日: 2006/01/06
投稿数: 13
投稿日時: 2009-01-22 22:10
いつもお世話になっております。
宮崎と申します。

ぴあちゃんさんのサンプルを参考に
GridViewを使用して作成してみました。

何故か、スクロールを行うと少しヘッダがずれてしまいますが
概ね実現することができました。
なぜヘッダがずれてしまうのかは、なぞのままです。。

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head id="Head1" runat="server">
<title>無題のページ</title>
<style type="text/css">
.Freezing
{
z-index:10;
position:relative;
color:#FFFFFF;
vertical-align:middle;
bgcolor='#64AEE6'
color:#FFFFFF;
height:25px;
vertical-align:middle;
top:expression(this.offsetParent.scrollTop-1);
}
</style>
<script type="text/javascript">
window.onload = function() {
var fr = document.createElement("iframe");
var tb = document.getElementById("GridView1");
var dv = document.getElementById("div1");
var header = tb.rows[0];
var w = header.offsetWidth;
var h = header.offsetHeight;

fr.style.width = w + "px";
fr.style.height = h + "px";
fr.style.zIndex = 8;
fr.style.position = "absolute";
fr.style.top = 0;
fr.style.left = 0;
fr.style.border = 0;
fr.frameBorder = 0;
fr.scrolling= "no";

div1.appendChild(fr);

fr.contentWindow.document.write("<body bgcolor='#64AEE6'></body>");
//このコメントを付けたりはずしたりして試せ。
div1.onscroll = function() {
fr.style.top = this.scrollTop + "px";
window.status = this.scrollTop;
}
}

</script>
</head>
<body style="height:100%">
<form id="form1" runat="server">
<div>
<div id="div1" style="height:300px;overflow:auto;">
<asp:GridView ID="GridView1" runat="server" Height="253px" Width="733px">
<HeaderStyle CssClass="Freezing" />
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）