How to modify the area/size for this column in the ListView control?

Question

I am a new ASP.NET developer and I am facing a weired problem with the style of the ListView. The style was working well but now I can't see the last column from the right side and I don't know why as shown in this snapshot:

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 that takes most of the area of the list view 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 displaying issue?

Answer 1

I suspect that your list view is inside a div, panel or some other parent control which has a fixed width,e.g 600px and since you've changed the width of the second column other columns don't have enough space to be displayed and I'm guessing no overflow has been set up on the div.

You have two options:

1. Remove your ListView from this parent control so it can dynamically re-size as required
2. Create a CSS style rule for the div to show a scroll bar if the content overflows beyond the fixed width:

CSS:

#listViewParent
 {
   width:600px;
   float:left;
   overflow:auto;
 }

ASPX:

<div id="listViewParent">
  Your ListView goes here
</div>

Answer 2

Hi you can try this.

int height = listView1.Items[0].Bounds.Height + listView1.Items[listView1.Items.Count - 1].Bounds.Bottom;

listView1.Size = new Size(400, height);