この画面を作成するにはどんな方法がありますか？

Question

いつもお世話になっております。

下記のような画面を作成したいと思っています。

画面表示時は左側の検索項目・ボタンのみの表示です。

ボタン押下後に右側のgridviewが表示されます。

テーブルを作成してその中に検索項目のテーブル、gridviewのテーブルを作成しようとしましたが

・複雑になる

・gridviewの高さを固定しスクロールバーを表示させるのではなく、最後まで表示したいという事は

テーブルの高さを動的に変更させるしかない

以上の事から諦めました。

他にはどのような方法がありますでしょうか？

宜しくお願い致します。

Answer 1

検索ボックスの下に果てしなく空白が広がるのがみっともないと思うので、検索結果を検索ボックスの下方に配置するとか。

Answer 2

テーブルを作成してその中に検索項目のテーブル、gridviewのテーブルを作成しようとしましたが

・複雑になる

・gridviewの高さを固定しスクロールバーを表示させるのではなく、最後まで表示したいという事は

テーブルの高さを動的に変更させるしかない

そんなに複雑にはならないと思います。tableタグを書くだけですよね？　また、テーブルの高さを指定しなければ、テーブルの高さは必要に応じて動的に変わります。ただ、レイアウトはCSSを使う方が一般的でしょう。
また、検索条件を指示する項目群（以下、検索ボックス）は、個人的にはスクロールアウトせず、常に出ている方が好みです。なぜなら、スクロールアウトしていると、

１．再検索する際に、検索ボックスを表示するところまで戻るのが面倒（一発で戻るような工夫はできるでしょうが・・・）、
２．どのような検索条件を入力したかユーザーが常に確認できない。

からです。
ですから、簡単にやるなら私も渋木さんと同じように、検索ボックスの下に検索結果を表示すると思います。

---

★良い回答には回答済みマークを付けよう！ わんくま同盟 MVP - Visual C# http://d.hatena.ne.jp/trapemiya/

Answer 3

左側の要素を全体的にくくるdivタグと右側の要素（GridViewだけかな？）をくくるdivタグをつくっておいて、あとはそのdivタグにたいするcssで場所を設定するようにすればよいのでは？
であれば図のように並べることもできますし、やはり左下が空白になるのがいやだ、ということになったとき、cssを変更するだけで検索結果を下にもってくるということもできるようになります。

というか、まずHTMLのお勉強ですね。
trapemyaさんが書いているとおり、Tableタグだって複雑にはならないですし。

---

あおい情報システム株式会社　小野修司（どっとねっとふぁん）

Answer 4

基本的には渋木さんの意見に賛成ですが・・・

どうしても段組したいなら、小野さんの意見（CSS を使う）に
賛成です。

css float でググルと参考になるページが見つかると思います。

Answer 5

皆様、ありがとうございます。

float で対応する事が出来ました！

小野様の仰る通り、まずはHTMLの勉強ですね。

これから勉強していきます。

ありがとうございました。