locked
table needs help RRS feed

  • Question

  • User-1767698477 posted

    I have this table which is actually a modal popup and it is not lining up right. (see image at the bottom here) I don't understand why there is white space in the middle of it. After the first textbox on the left, why is there a gap between where the textbox ends and there the name starts for the next one?

    There should not be word wrap on the unit designator name. I am not using labels here. Does using labels make any difference in how the word in front of the control is rendered?  Also, you can see the textbox with A123 is wrapping around to the next line which is wrong. I think there is a boundry at the right side of the text boxes. Why is there all this white space in the middle of the page? I don't understand what is causing this.

     <div style="overflow-x: auto; height: 150px; width: 700px">
                            <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" CellPadding="3" Caption="Liabilities" CaptionAlign="Left" HorizontalAlign="Center" OnRowDataBound="Gridview1_rowdatabound" RowStyle-Wrap="False" HeaderStyle-Wrap="False">
                                <PagerStyle Wrap="True" />
                                <RowStyle HorizontalAlign="Center" />
                                <Columns>
                                    <asp:TemplateField ItemStyle-Width="30px" HeaderText="">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="imgbtn" ImageUrl="~/templates/images/pencil.gif" runat="server" Width="25" Height="25" OnClick="imgbtn_Click" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
                                    <asp:BoundField DataField="Othertype" HeaderText="Other type" SortExpression="Othertype" />
                                    <asp:BoundField DataField="Name" HeaderText="Company" SortExpression="Name" />
                                    <asp:BoundField DataField="Acctnum" HeaderText="Acct #" SortExpression="Acctnum" />
                                    <asp:BoundField DataField="Mopmt" HeaderText="Payment" SortExpression="Mopmt" />
                                    <asp:BoundField DataField="Balance" HeaderText="Balance" SortExpression="Balance" />
                                    <asp:BoundField DataField="Molefttopay" HeaderText="Months left" SortExpression="Molefttopay" />
                                    <asp:BoundField DataField="Paidatclosing" HeaderText="Paid @ close" SortExpression="Paidatclosing" />
                                    <asp:BoundField DataField="PaidPTC" HeaderText="Paid PTC" SortExpression="PaidPTC" />
                                    <asp:BoundField DataField="Resub" HeaderText="Resubordinate" SortExpression="Resub" />
                                    <asp:BoundField DataField="Omit" HeaderText="Omit" SortExpression="Omit" />
                                    <asp:BoundField DataField="REOnum" HeaderText="REO #" SortExpression="REOnum" />
                                </Columns>
                            </asp:GridView>
                        </div>
                        <asp:Label ID="lblresult" runat="server" />
                        <asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
                        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
                        </asp:ModalPopupExtender>
                        <asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="260px" Width="760px" Style="display: none">
                            <table width="100%" style="border: Solid 3px #000000; width: 100%; height: 100%" cellpadding="0" cellspacing="0">
                                <tr style="background-color: #FFB30F">
                                    <td colspan="4" style="height: 10%; color: White; font-weight: bold; font-size: larger" align="center">Liability Details</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <br />
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td align="right"><b>&nbsp;Name :</b> &nbsp;
                                    </td>
                                    <td>
                                        <asp:TextBox runat="server" ID="txtliabname"></asp:TextBox>
                                    </td>
                                    <td align="right"><b>Type : </b>&nbsp;
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddliabtype" runat="server">
                                            <asp:ListItem Value="" Selected="True">-Select-</asp:ListItem>
                                            <asp:ListItem Value="Collections/Judgments/Liens"></asp:ListItem>
                                
                                        </asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right"><b>&nbsp;Street : </b>&nbsp
                                    </td>
                                    <td>
                                        <asp:TextBox runat="server" ID="txtliabstreet"></asp:TextBox>
                                    </td>
    
                                    <td align="right" width="170"><b>Accountnum : </b>&nbsp
                                    </td>
                                    <td>
                                        <asp:TextBox runat="server" ID="txtliabaccountnum" Width="150px"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" style="font-size:small">Unit Designator
                                       
                                    </td>
                                    <td>
                                         <asp:DropDownList ID="ddunitdesignator" runat="server" Font-Size="Small">
                                            <asp:ListItem Value="" Selected="True">-Select-</asp:ListItem>
                                            <asp:ListItem Value="Apartment"></asp:ListItem>
                                            <asp:ListItem Value="Basement"></asp:ListItem>
                                            <asp:ListItem Value="Building"></asp:ListItem>
                                            
                                        </asp:DropDownList>
                                       &nbsp
                                          <b>&nbsp;Number :</b><asp:TextBox runat="server" ID="txtliabunitnum" Width="50px"></asp:TextBox>
                                    </td>
    
                                    <td align="right"><b>Mortgage type:</b> &nbsp
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddliabmtgtype" runat="server">
                                            <asp:ListItem Value="" Selected="True">-Select-</asp:ListItem>
                                            <asp:ListItem Value="Conventional">Conventional</asp:ListItem>
                                            <asp:ListItem Value="FHA">FHA</asp:ListItem>
                                            <asp:ListItem Value="VA">VA</asp:ListItem>
                                            <asp:ListItem Value="">USDA/RHS</asp:ListItem>
                                        </asp:DropDownList>
                                        &nbsp
                                        <b>Credit limit : $</b>
                                        <asp:TextBox runat="server" ID="txtliabcreditlimit" Width="80px"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right"><b>&nbsp;City :</b> &nbsp
                                    </td>
                                    <td>
                                        <asp:TextBox runat="server" ID="txtliabcity"></asp:TextBox>
                                    </td>
    
                                    <td align="right"><b>Balance : $ </b>&nbsp
                                    </td>
                                    <td>
                                        <asp:TextBox runat="server" ID="txtliabbal" Width="93px"></asp:TextBox>
                                        &nbsp<b>Mos Left :</b>&nbsp
                                        <asp:TextBox runat="server" ID="txtliabmoleft" Width="40px"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right"><b>&nbsp;State :</b> &nbsp
                                    </td>
                                    <td>
                                        <asp:TextBox runat="server" ID="txtliabstate" Width="20px"></asp:TextBox>
                                        Zip:
                                        <asp:TextBox runat="server" ID="txtliabzip" Width="50px"></asp:TextBox>
                                    </td>
    
                                    <td align="right"><b>Payoff Amt :</b> &nbsp
                                    </td>
                                    <td>
                                        <asp:TextBox runat="server" ID="txtliabpayoff" Width="93px"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td align="right"><b>Payment :</b> &nbsp
                                    </td>
                                    <td>
                                        <asp:TextBox runat="server" ID="txtliabmopmt" Width="93px"></asp:TextBox>
                                        <b>Incl taxes : 
                                        <asp:CheckBox ID="cbliabtaxes" runat="server" />
                                            Insurance</b>
                                        <asp:CheckBox ID="cbliabins" runat="server" />
                                    </td>
                                </tr>
                                <tr>
    
                                    <td colspan="4" style="font-size: small; font-weight: 700" align="center">
                                        <br />
                                        <asp:CheckBox ID="cbliabpaceloan" runat="server" />Pace Loan
                                        <asp:CheckBox ID="cbliabpoff" runat="server" />To be paid off at closing<asp:CheckBox ID="cbliabpdbefore" runat="server" />To be paid off before closing<asp:CheckBox ID="cbliabresubord" runat="server" />Resubordinated<asp:CheckBox ID="cbliabomit" runat="server" />Omitted
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td colspan="4" align="center">
                                        <br />
                                        <asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update" OnClick="btnUpdate_Click" />
                                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                                    </td>
                                    <td></td>
                                </tr>
                            </table>
                        </asp:Panel>

    Wednesday, May 5, 2021 1:00 AM

Answers

  • User-939850651 posted

    Hi sking,

    For security reasons, I cannot see the effect picture you provided, but based on your description and the code provided, I found that:

    <td align="right" width="170">

    You set the width attribute for one of the td elements, which results in that the width of this column in the entire table will be this value. You can see clearly in the developer tools, I suggest you set the width of each column in the empty row under the Header. like this:

    <table width="100%" style="border: Solid 3px #000000; width: 100%; height: 100%" cellpadding="0" cellspacing="0">
                    <tr style="background-color: #FFB30F">
                        <td colspan="4" style="height: 10%; color: White; font-weight: bold; font-size: larger" align="center">Liability Details</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td  style="width:15%">
                            <br />
                        </td>
                        <td  style="width:30%"></td>
                        <td  style="width:15%"></td>
                        <td  style="width:40%"></td>
                    </tr>
                    <tr>
                        <td align="right"><b>&nbsp;Name :</b> &nbsp;
                        </td>
                        <td>
                            <asp:TextBox runat="server" ID="txtliabname"></asp:TextBox>
                        </td>
                        <td align="right"><b>Type : </b>&nbsp;
                        </td>
                        <td>
                            <asp:DropDownList ID="ddliabtype" runat="server">
                                <asp:ListItem Value="" Selected="True">-Select-</asp:ListItem>
                                <asp:ListItem Value="Collections/Judgments/Liens"></asp:ListItem>
                            </asp:DropDownList>
                        </td>
                    </tr>
    ...
    </table>

    Result:

    Hope this can help.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 5, 2021 6:11 AM

All replies

  • User-939850651 posted

    Hi sking,

    For security reasons, I cannot see the effect picture you provided, but based on your description and the code provided, I found that:

    <td align="right" width="170">

    You set the width attribute for one of the td elements, which results in that the width of this column in the entire table will be this value. You can see clearly in the developer tools, I suggest you set the width of each column in the empty row under the Header. like this:

    <table width="100%" style="border: Solid 3px #000000; width: 100%; height: 100%" cellpadding="0" cellspacing="0">
                    <tr style="background-color: #FFB30F">
                        <td colspan="4" style="height: 10%; color: White; font-weight: bold; font-size: larger" align="center">Liability Details</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td  style="width:15%">
                            <br />
                        </td>
                        <td  style="width:30%"></td>
                        <td  style="width:15%"></td>
                        <td  style="width:40%"></td>
                    </tr>
                    <tr>
                        <td align="right"><b>&nbsp;Name :</b> &nbsp;
                        </td>
                        <td>
                            <asp:TextBox runat="server" ID="txtliabname"></asp:TextBox>
                        </td>
                        <td align="right"><b>Type : </b>&nbsp;
                        </td>
                        <td>
                            <asp:DropDownList ID="ddliabtype" runat="server">
                                <asp:ListItem Value="" Selected="True">-Select-</asp:ListItem>
                                <asp:ListItem Value="Collections/Judgments/Liens"></asp:ListItem>
                            </asp:DropDownList>
                        </td>
                    </tr>
    ...
    </table>

    Result:

    Hope this can help.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 5, 2021 6:11 AM
  • User-1767698477 posted

    Hi XuDong,

    Yes, I change it to your suggestion with the first row using %, and that helped alot. Thanks very much for the help.

    <tr>
                                    <td style="width: 15%">
                                        <br />
                                    </td>
                                    <td style="width: 29%"></td>
                                    <td style="width: 16%"></td>
                                    <td style="width: 40%"></td>
                                </tr>

    Wednesday, May 5, 2021 5:06 PM