- - PR -
GridView 表示が壊れる? 画面をリサイズすれば表示が戻る
1
投稿者 | 投稿内容 | ||||
---|---|---|---|---|---|
|
投稿日時: 2008-03-25 19:53
お世話になっております
不可思議な現象がでています マスターページを使用して 画面を縦3分割しています 下段はガイダンス表示エリアとして位置を固定する為に 中段は Panel の Heightにて縦サイズを固定してスクロール(Auto)表示してます この中断エリアの GridView の初期表示時に 最下段の表示以降にGridViewが作成され 本来表示される領域は すべて空白になってしまっています この現象は、GridViewに表示される件数と クライアントのスペックに関わっているようで A端末では、100件分であれば 正常に表示されるが B端末では、200件分でも 正常に表示されます Gridviewのセルに対して、WidthやHeightを指定していないものは GridViewの部分が表示されるまで時間がかかるけど 待てば正常に表示されています こんな不可解現象に遭遇したことありませんか? 対処方をご存知の方、いらっしゃいませんか? ちなみに ガイダンス表示と 一覧表示部分はスクロールで というのは ユーザ仕様です よろしくお願いいたします | ||||
|
投稿日時: 2008-03-26 02:53
(1)table-layout:fixed 指定してください。
(2)幅・高さは、%指定せず、PX指定にしてください。 あるカラムがそれまでのカラムより長い or 高さが変わる、場合に、 それまでの計算済みカラムが再計算され、画面全体が再描画される ようです。 大昔の実測値ですが、Pen3 700Mhz メモリ256M ,IE5.5 で、テーブル 14カラム、横スクロール無し、400行、でカラムを%指定した場合 の画面ロードから表示完了までの時間はおおよそ30秒でした。 横スクロールさせない場合は 表示内容が決まっているカラムはおおよその大きさを決め打ちでPX指定 しておく。全体を%指定しない。カラムにoverflow:hidden を指定する。 などで高速化が図れます。 横スクロール・縦スクロールした場合で、ヘッダが固定されている必要 がある場合、CSSと若干のJavaScriptを使うことでヘッダを固定できます。 単にヘッダ固定のみで良ければ(もちろん横スクロールに追従します) CSSだけでも実現できます。DTD指定が必須ですが。 | ||||
|
投稿日時: 2008-03-26 14:04
返信遅れてすみません レスをありがとうございます 1、画面が壊れる画面 現在、サイズ指定は固定で PX指定しています GridViewの1ページの行数を固定化してやると 画面が壊れることが回避されます ただ、外側の Panelの高さとGridViewの指定行数や カラムの vertical-align: middle; の指定の 有り無しにて また 画面が壊れたりします 2、画面が壊れる事はないが、GridView表示に時間がかかる画面 Table表示の高速化の情報を 感謝いたします ただ 今回の仕様では 横のセル数、縦の行数は 固定ができません 表示されるセルの内容も各クライアントユーザーが 抽出項目を自由に設定しての表示になるため 固定することができません ヘッダー部の固定もせず、縦横スクロールです Sqlを動的に生成したのち DataTableを作成し GridViewにバインドするのみで作成しています CSS等一切の見栄え操作は行えません 一覧表を表示する際の所要時間は 待ってもらえるのですが 画面上部に配置したボタンは 表示されてしまってるので (HTMLのソース表示すると、画面ができあがってないので ソース表示は出来ない状態 であるにも関わらず) このボタンが押せてしまうのです なおかつ 最悪なことに、ボタンを押されると、落っこちるのです | ||||
|
投稿日時: 2008-03-27 01:08
ボタン類のパネルを以下のようにします。
<div id="contentButtons"> //ボタンのパネル </div> <style> #contentButtons { visibility:hidden; } </style> onload で見えるようにする。 又は、 <div id="contentButtons" disabled="true"> //ボタン類 </div> で onload で活性にする。disabled = false; ですね。 IEだと、ブロック要素に disabled が効き、コンテンツのフォーム要素と リンクは全て活性/非活性になります。 または、 <div id="toumei"> </div> <style> #toumei { position:absolute; width:100%; height:50%; filter:alpha(opacity=20); z-index:100; } </style> ってやれば、ボタン類が並んでいるとこに ドロップリストさえ無ければ、 半透明レイヤーをかぶせることで「押せなく」出来ます。 で、これもまた、 onload で非表示にするだけです。 MSDNを覗くとたまに、Silverlight のコマーシャルレイヤーが出てきますが、 あれはこれと同じ仕組みです。右上の「×」ボタンで非表示に出来る点が 違うくらい。 追加訂正: あとひとつ。昔の遅い環境用に対応した逃げ方ですが。 <div id="message">しばらくおまちください</div> <div id="contents" style="visibility:hidden;"> //ヘッダ //ボタン類 //<asp:GridView /> //フッタ類 </div> てな感じです。 これもまた、onload で message を消して、 contents を表示する。全部非表示にしちゃうのもアレなんで ヘッダとフッタは表示しておいても良いかもしれませんが、 ヘッダとボタン類が兼用パネルならば、やはり消しておくの が無難です。 さらに追加: このときは、確かプログレスバーも出していましたね。 タイマーで特定IDをポーリングしてバーのアニメーションを動かす、 みたいな仕掛けだったと思います。 ブラウザのキャンセルボタン押されないようにするためだけ(とは言え押せちゃう ので押されないように願う、というか・・・右上の地球儀か旗は止まっているのに 画面が一向に表示されないので不信感を抱かれた、ような記憶がよみがえってきま した(:-)の小細工でした。 [ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-03-27 01:17 ] [ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-03-27 01:23 ] | ||||
|
投稿日時: 2008-03-27 14:09
どうもありがとうございます ボタンの非活性化 うまくいきました ありがとう ございます |
1