1 Replies - 7637 Views - Last Post: 25 May 2012 - 10:30 AM

#1 duncsg1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 23-May 12

Alignment issue with TextBoxes when inside an <asp:Table>.

Posted 23 May 2012 - 02:07 PM

I'm developing a website and am attempting to create a properly aligned data entry form. Using a table structure I was expecting the controls to align properly, but to no avail. I've been using the ColumnSpan attribute of the <asp:TableCell> control to make the Title field span across the width of the entire form.

The Title <asp:TextBox> has a width property set to "100%", but the First and Last Name boxes have specificly sized pixel widths.

This is the result of my current code:

Posted Image

And the code itself:


<asp:Table runat="server">
    <asp:TableRow>
        <asp:TableCell>
            First Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="FirstNameTextBox" runat="server" Width="150px" />
        </asp:TableCell>
        <asp:TableCell>
            &nbsp;&nbsp;Last Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="LastNameTextBox" runat="server" Width="150px" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            Title:
        </asp:TableCell>
        <asp:TableCell ColumnSpan="3">
            <asp:TextBox ID="TitleTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>




As you can see the layout is simple enough. Unfortunately it just seems to take up a hair too much space. Any advice into removing the additional space on the Title <asp:TextBox> so that they align perfectly would be greatly appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Alignment issue with TextBoxes when inside an <asp:Table>.

#2 duncsg1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 23-May 12

Re: Alignment issue with TextBoxes when inside an <asp:Table>.

Posted 25 May 2012 - 10:30 AM

SOLUTION:

<asp:Table runat="server">
    <asp:TableRow>
        <asp:TableCell>
            First Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell Width="150px">
            <asp:TextBox ID="FirstNameTextBox" runat="server" Width="100%" />
        </asp:TableCell>
        <asp:TableCell Width="10px" />
        <asp:TableCell>
            Last Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell Width="150px">
            <asp:TextBox ID="LastNameTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            Title:
        </asp:TableCell>
        <asp:TableCell ColumnSpan="4">
            <asp:TextBox ID="TitleTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

I changed the Width definitions to be on the <asp:TableCell> and added a 10px column for blank space. Then, by setting the Width of the TextBoxes to be 100% it eliminated the space; odd, but simple solution.


Posted Image
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1