How do I change the region / size for this column in a ListView control?
I am a new ASP.NET developer and I am facing a tricky issue with the styling of a ListView. The style worked well, but now I can't see the last column on the right side and I don't know why, as shown in this screenshot:
Here's my original code:
<asp:ListView ID="All_ListView" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<div ><table id="thetable" cellpadding="4px" cellspacing="1px" style="margin:0px 0px 0px 0px; border:2px solid #003366; font-size:13px; font-weight:bold;">
<thead>
<tr style="background-color:#C6D7B5;">
<%--<th style="border-right:2px solid white;border-bottom:2px solid #003366; ">LL No.</th>--%>
<th style="border-bottom:2px solid #003366; ">
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="chkBoxPosition" OnCheckedChanged="CheckBoxHeader_All" AutoPostBack="true" />
</th>
<th style="border-bottom:2px solid #003366; ">Title</th>
<th style="border-bottom:2px solid #003366; ">Description</th>
<th style="border-bottom:2px solid #003366; ">Type</th>
<th style="border-bottom:2px solid #003366; ">Username</th>
<th style="border-bottom:2px solid #003366; ">Name</th>
<th style="border-bottom:2px solid #003366; ">Division</th>
<th style="border-bottom:2px solid #003366; ">Submitted Date</th>
<th style="border-bottom:2px solid #003366; ">Status</th>
</tr>
</thead>
<tbody><tr id="itemPlaceholder" runat="server"></tr></tbody>
</table></div>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="CheckBox2" runat="server" />
</td>
<td>
<asp:Label runat="server" ID="lblTitle" Text='<%#Eval("Title") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblDescription" Text='<%#Eval("Description")%>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblType" Text='<%#Eval("Type")%>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblUsername" Text='<%#Eval("Username") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblName" Text='<%#Eval("Name") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblDivision" Text='<%#Eval("DivisionShortcut") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblSubmittedDate" Text='<%#Eval("DateSubmitted")%>'></asp:Label>
</td>
<td>
<asp:LinkButton runat="server" ID="lnkSuggestionStatus" Text='<%#Eval("Status")%>'
OnClick="lnkSuggestionStatus_Click">
</asp:LinkButton>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
I changed the width of the second column, which takes up most of the list area, and see what happened when I changed it.
<asp:ListView ID="All_ListView" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<div ><table id="thetable" cellpadding="4px" cellspacing="1px" style="margin:0px 0px 0px 0px; border:2px solid #003366; font-size:13px; font-weight:bold;">
<thead>
<tr style="background-color:#C6D7B5;">
<%--<th style="border-right:2px solid white;border-bottom:2px solid #003366; ">LL No.</th>--%>
<th style="border-bottom:2px solid #003366; ">
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="chkBoxPosition" OnCheckedChanged="CheckBoxHeader_All" AutoPostBack="true" />
</th>
<th style="border-bottom:2px solid #003366; ">Title</th>
<th style="border-bottom:2px solid #003366; ">Description</th>
<th style="border-bottom:2px solid #003366; ">Type</th>
<th style="border-bottom:2px solid #003366; ">Username</th>
<th style="border-bottom:2px solid #003366; ">Name</th>
<th style="border-bottom:2px solid #003366; ">Division</th>
<th style="border-bottom:2px solid #003366; ">Submitted Date</th>
<th style="border-bottom:2px solid #003366; ">Status</th>
</tr>
</thead>
<tbody><tr id="itemPlaceholder" runat="server"></tr></tbody>
</table></div>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="CheckBox2" runat="server" />
</td>
<td>
<asp:Label runat="server" ID="lblTitle" Text='<%#Eval("Title") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblDescription" Text='<%#Eval("Description")%>' Width="50%"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblType" Text='<%#Eval("Type")%>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblUsername" Text='<%#Eval("Username") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblName" Text='<%#Eval("Name") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblDivision" Text='<%#Eval("DivisionShortcut") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblSubmittedDate" Text='<%#Eval("DateSubmitted")%>'></asp:Label>
</td>
<td>
<asp:LinkButton runat="server" ID="lnkSuggestionStatus" Text='<%#Eval("Status")%>'
OnClick="lnkSuggestionStatus_Click">
</asp:LinkButton>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Could you please help me with this display problem?
+3
source to share
2 answers
I suspect that your list view is inside a div, panel, or some other parent control that has a fixed width, like 600px, and since you changed the width of the second column, there is not enough room for the other columns to be displayed, and I assume that the overflow was not set on the div.
You have two options:
- Remove the ListView from this parent control so that it can dynamically resize as needed
- Create a CSS style rule for the div to show a scrollbar if the content overflows at a fixed width:
CSS
#listViewParent
{
width:600px;
float:left;
overflow:auto;
}
ASPX:
<div id="listViewParent">
Your ListView goes here
</div>
+1
source to share