C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[6]: ListView横スクロール時の列幅指定

分類:[ASP.NET (VB)]　

いつもお世話になります。まさひろです。

ASP.NET3.5(VWD2008)、ORACLE11で勉強をしています。
また分からないことがあり、ご教授頂きたく書き込ませていただきました。

LisstViewの横幅が長いので、横スクロールをつけたいと思い、いろいろ調べたところ
、divで
出来ることがわかりました。
しかし、やってみたところ、一覧表示時の削除ボタンと編集ボタンが２行で表示されて
しまいます。
なので、下記のように「style="width:200px」という風に指定しました。
<ItemTemplate>のほかにも、<EditItemTemplate>や<InsertItemTemplate>でも
すべて同じように指定しています。
しかし、サイズが反映されず２行になってしまいます。
指定の仕方がわるいのでしょうか？

<div style="height:500px; width:400px; overflow:auto;">

<asp:ListView ID="ListView1" runat="server" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" InsertItemPosition="LastItem">
<ItemTemplate>
<tr style="">
<td style="width:200px;text-align:center;">
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="削除"
/>
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編集" />
</td>
<td>
<asp:Label ID="CategoryIDLabel" runat="server"
Text='<%# Eval("CategoryID") %>' />
</td>
<td>
<asp:Label ID="CategoryNameLabel" runat="server"
Text='<%# Eval("CategoryName") %>' />
</td>
<td>
<asp:Label ID="DescriptionLabel" runat="server"
Text='<%# Eval("Description") %>' />
</td>
<td>
<asp:Label ID="CategoryColorLabel" runat="server"
Text='<%# Eval("CategoryColor") %>' />
</td>
</tr>
</ItemTemplate>

■No52586 (まさひろ さん) に返信

> しかし、サイズが反映されず２行になってしまいます。
> 指定の仕方がわるいのでしょうか？

ListView では table を利用していらっしゃるのですか。
table のスタイルシートで table-layout:fixed と width を指定して
列の幅を指定するとよいかと思います。

列の幅を指定する方法としては col を記述したり table の最初の行の列の幅を指定したり
といったやり方があります。

もりおさん、いつもいつもお世話になります。

> ListView では table を利用していらっしゃるのですか。
> table のスタイルシートで table-layout:fixed と width を指定して
> 列の幅を指定するとよいかと思います。

はい、tableを利用しています。
実際のテーブルの内容は以下になります。

<table style="table-layout:fixed;width:100%;">
<tr>
<td style="vertical-align:top;width:300px">
<table style="width:100%;">
<tr>
<td style="width:100px">
<asp:Label ID="lblYMD" runat="server" Text="日付"/>
</td>
<td style="width:200px">
<asp:TextBox ID="txtYMD" runat="server" MaxLength="10"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:Button ID="btnSerch" runat="server" Text="検索" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: top;">

<div style="height:550px; width:700px; overflow:auto; ">

<asp:ListView ID="ListView1" runat="server" InsertItemPosition="LastItem">
<ItemTemplate>
<tr>
<td>
<asp:Label ID="CategoryIDLabel" runat="server"
Text='<%# Eval("CategoryID") %>' />
</td>
<td>
<asp:Label ID="CategoryNameLabel" runat="server"
Text='<%# Eval("CategoryName") %>' />
</td>
<td>
<asp:Label ID="DescriptionLabel" runat="server"
Text='<%# Eval("Description") %>' />
</td>
<td>
<asp:Label ID="CategoryColorLabel" runat="server"
Text='<%# Eval("CategoryColor") %>' />
</td>
</tr>
</ItemTemplate>

<--省略-->

</asp:ListView>
</div>
</td>
</tr>
</table>

>
> 列の幅を指定する方法としては col を記述したり table の最初の行の列の幅を指定したり
> といったやり方があります。
>

<col style="width:200;">と言う風に入れてみたのですが入れ方が悪いのか反映されませんでした。

colで記述との事ですが、
listviewの場合、<ItemTemplate>、<AlternatingItemTemplate>などにすべて
いれるということでしょうか？

2010/08/17(Tue) 13:08:21 編集(投稿者)

■No52596 (まさひろ さん) に返信

> <table style="table-layout:fixed;width:100%;">
>   <tr>
>     <td style="vertical-align:top;width:300px">
>       <table style="width:100%;">
>         <tr>
>           <td style="width:100px">
>             <asp:Label ID="lblYMD" runat="server" Text="日付"/>
>           </td>
> ...

table の中に table があって次の行に div、その配下に ListView、ということは
こんな構造でしょうか。

table
  table
  div
    ListView
    
ListView における列幅を指定するわけなので ListView でレンダリングされる table の
スタイルシートに table-layout:fixed を記述する必要があります。
おそらくは ListView の LayoutTemplate に <table ... の記述があるかと思います。
そこに table-layout:fixed を記述してみてください。

> <col style="width:200;">と言う風に入れてみたのですが入れ方が悪いのか反映されませんでした。

反映されないというのは col タグそのものが出力されないということでしょうか。
それとも col タグは出力されるけれども幅の指定が反映されないということでしょうか。

> colで記述との事ですが、
> listviewの場合、<ItemTemplate>、<AlternatingItemTemplate>などにすべて
> いれるということでしょうか？

LayoutTemplate に記述するとよいかと思います。

もりおさん、ありがとうございます。

> table の中に table があって次の行に div、その配下に ListView、ということは
> こんな構造でしょうか。
>
> table
> table
> div
> ListView
>
> ListView における列幅を指定するわけなので ListView でレンダリングされる table の
> スタイルシートに table-layout:fixed を記述する必要があります。
> おそらくは ListView の LayoutTemplate に <table ... の記述があるかと思います。
> そこに table-layout:fixed を記述してみてください。
>
>><col style="width:200;">と言う風に入れてみたのですが入れ方が悪いのか反映されませんでした。
>
> 反映されないというのは col タグそのものが出力されないということでしょうか。
> それとも col タグは出力されるけれども幅の指定が反映されないということでしょうか。

col タグは出力されるけれども幅の指定が反映されないということです。
しかし、これは、<ItemTemplate>、<AlternatingItemTemplate>などに記述していたためです。

>
>>colで記述との事ですが、
>>listviewの場合、<ItemTemplate>、<AlternatingItemTemplate>などにすべて
>>いれるということでしょうか？
>
> LayoutTemplate に記述するとよいかと思います。

こちらに記述してみましたが、やはり幅は反映されません・・・・
記述の仕方が悪かったのでしょうか？

<LayoutTemplate>
<table runat="server" >
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="table-layout:fixed;width:100%;">
<col width="100px">
<col width="200px">
<col width="300px">
<col width="200px">
<col width="200px">
<tr runat="server" style="">
<th runat="server">
</th>
<th runat="server">
CategoryID</th>
<th runat="server">
CategoryName</th>
<th runat="server">
Description</th>
<th runat="server">
CategoryColor</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>

■No52599 (まさひろ さん) に返信

> こちらに記述してみましたが、やはり幅は反映されません・・・・
> 記述の仕方が悪かったのでしょうか？

col の記述は問題ないように思います。
閉じタグがないのが気にはなりますが、それを以って col タグが反映されないとは考えにくい
です。

> <table ID="itemPlaceholderContainer" runat="server"

runat="server" となっているので table はサーバーコントロール HtmlTable コントロール
として認識されます。

HtmlTable クラス
http://msdn.microsoft.com/ja-jp/library/system.web.ui.htmlcontrols.htmltable.aspx

リンク先のメモの欄を見ていただくとわかるのですが、HtmlTable コントロールは col に対応
しておらず、col を出力しないという切ない事情があります。

table タグから runat="server" 属性を除去してみてはいかがでしょうか。

もりおさん、いつもありがとうございます。

>
> HtmlTable クラス
> http://msdn.microsoft.com/ja-jp/library/system.web.ui.htmlcontrols.htmltable.aspx
>
> リンク先のメモの欄を見ていただくとわかるのですが、HtmlTable コントロールは col に対応
> しておらず、col を出力しないという切ない事情があります。
>
> table タグから runat="server" 属性を除去してみてはいかがでしょうか。
>

table タグから runat="server" 属性を除去したところ、指定した幅で表示されました！！
凄く苦労したので本当にうれしいです。

runat="server"っていままでどんな意味かも考えたことがありませんでした；
いろいろと教えていただいて、本当にありがとうございます。

C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[6]: ListView横スクロール時の列幅指定

過去ログには書き込み不可