asp.net - CSS for width of asp:ListView -
i've read listview can't take css adjust width, in itemtemplate, can't it. i'm trying put 3 listview controls side side. each control has image , text right. think windows explore file list, single column name.
the text in each listview less 32 characters, there should plenty of room, each listview takes more 50% of screen no matter i've tried. css not strong suit.
current css wrong
.lv_table{ width:500px; border: 1px solid #ccc; } .lv_tr { width: 100px; } .list_view { border-style: solid; border-width: 2px; border-color: #000000; } .list_image { float: left; display: inline-block; } .list_item_large { font-size: 1.6em; color: #000000; padding: 8px 0px 0px 0px; margin: 0px auto; display: inline-block; text-align:left; min-height: 32px; }
listview controls
<table class="lv_table"> <tr class="lv_tr"><td class="list_view"> <asp:listview runat="server" id="lvwcategories" > <layouttemplate> <div style="width: 500px;"> <asp:placeholder runat="server" id="itemplaceholder" /> </div> </layouttemplate> <itemtemplate> <div class="list_image"> <img alt="" src='<%# "styles/images/" + eval("category_icon") %>' height="32" width="32" /> </div> <div class="list_item_large "> <a href='scategories.aspx?cat_id=<%# eval("category_id")%>'><%# eval("cat_title")%></a> </div> </itemtemplate> <itemseparatortemplate> <div> </div> </itemseparatortemplate> <emptydatatemplate> <div> <img alt="" src="styles/images/ic_lw.png" height="48" width="48" /> </div> <div> <b>no categories found</b> </div> </emptydatatemplate> </asp:listview> </td> <td> </td> <td class="list_view"> <asp:listview runat="server" id="lvwlists"> <layouttemplate> <div style="width: 500px;"> <asp:placeholder runat="server" id="itemplaceholder" /> </div> </layouttemplate> <itemtemplate> <div class="list_image"> <img alt="" src='<%# "styles/images/" + eval("category_icon") %>' height="32" width="32" /> </div> <div class="list_item_large "> <a href='scategories.aspx?cat_id=<%# eval("category_id")%>'><%# eval("cat_title")%></a> </div> </itemtemplate> <itemseparatortemplate> <div> </div> </itemseparatortemplate> <emptydatatemplate> <div> <img alt="" src="styles/images/ic_lw.png" height="48" width="48" /> </div> <div> <b>no categories found</b> </div> </emptydatatemplate> </asp:listview> </td> <td> </td> <td class="list_view"> <asp:listview runat="server" id="lvwitems"> <layouttemplate> <div style="width: 500px;"> <asp:placeholder runat="server" id="itemplaceholder" /> </div> </layouttemplate> <itemtemplate> <div class="list_image"> <img alt="" src='<%# "styles/images/" + eval("category_icon") %>' height="32" width="32" /> </div> <div class="list_item_large "> <a href='scategories.aspx?cat_id=<%# eval("category_id")%>'><%# eval("cat_title")%></a> </div> </itemtemplate> <itemseparatortemplate> <div> </div> </itemseparatortemplate> <emptydatatemplate> <div> <img alt="" src="styles/images/ic_lw.png" height="48" width="48" /> </div> <div> <b>no categories found</b> </div> </emptydatatemplate> </asp:listview> </td> </tr> </table>
you can change .lv_table
style width
100%
, give .list_view
style width:33%;
, remove inline width:500px;
of <div>
's in layouttemplates.
Comments
Post a Comment