CODEWITHSUNDEEP
asp.nethtml-tablewebformsalignment
Jimushi
Jimushi

Reputation: 121

How to align a radio button list inside a table with the rest of the table

I'm trying to make the radio button list be align with the rest of the table, even when you reduce the size of the browser window. 

<div>
    <asp:Table ID="Table1" runat="server" style="width:100%" align="center">
        <asp:TableRow runat="server" align="center">
            <asp:TableCell runat="server" align="center">1</asp:TableCell>
            <asp:TableCell runat="server" align="center">2</asp:TableCell>
            <asp:TableCell runat="server" align="center">3</asp:TableCell>
            <asp:TableCell runat="server" align="center">Result</asp:TableCell>
        </asp:TableRow>
        <asp:TableRow runat="server" align="center">
            <asp:TableCell runat="server" align="center">
                <asp:RadioButton ID="RadioButton1" runat="server" /></asp:TableCell>
            <asp:TableCell runat="server" align="center">
                <asp:RadioButton ID="RadioButton2" runat="server" /></asp:TableCell>
            <asp:TableCell runat="server" align="center">
                <asp:RadioButton ID="RadioButton3" runat="server" /></asp:TableCell>
            <asp:TableCell runat="server" align="center"></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow runat="server" align="center">
            <asp:TableCell runat="server" align="center" RepeatColumns="3">
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Value="1"></asp:ListItem>
                    <asp:ListItem Value="2"></asp:ListItem>
                    <asp:ListItem Value="3"></asp:ListItem>
                </asp:RadioButtonList>
            </asp:TableCell>
            <asp:TableCell runat="server" align="center"></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</div>

The 2nd table row I used 3 radio buttons instead of a radio button list and is aligned with the 1st row even when the size of the browser window is altered, but the 3rd row is where I used the radio button list and it just does not align at all with the rest of the table.

Here is a print screen for better understanding: https://i.sstatic.net/3AvhL.png

Upvotes: 1

Views: 1525

Answers (1)

IrishChieftain
IrishChieftain

Reputation: 15252

You have four columns in the first two rows and only two columns in the third row. So, either add two more columns (TableCells) to the third row or add a ColumnSpan property set to 3 to the cell that has the RadioButtonList to compensate. The rest is just alignment and the use of some CSS.

If you're adding blank cells, add a HTML space for the text property to get them to render correctly. I'm guessing you're using CSS for the table cells/borders.

So, if you just add a ColumnSpan to what you have:

<asp:TableRow runat="server" align="center">
    <asp:TableCell runat="server" align="center" ColumnSpan="3"
        RepeatColumns="3">
        <asp:RadioButtonList ID="RadioButtonList1" runat="server"
            RepeatDirection="Horizontal">
            <asp:ListItem Value="1"></asp:ListItem>
            <asp:ListItem Value="2"></asp:ListItem>
            <asp:ListItem Value="3"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:TableCell>
    <asp:TableCell runat="server" align="center"></asp:TableCell>
</asp:TableRow>

Alternatively, you can add two more blank cells to what you have:

<asp:TableRow runat="server" align="center">
    <asp:TableCell runat="server" align="left" CssClass="radioButtonCell"
        RepeatColumns="3">
        <asp:RadioButtonList ID="RadioButtonList1" runat="server"
            RepeatDirection="Horizontal">
            <asp:ListItem Value="1"></asp:ListItem>
            <asp:ListItem Value="2"></asp:ListItem>
            <asp:ListItem Value="3"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:TableCell>
    <asp:TableCell runat="server" align="center">&nbsp;</asp:TableCell>
    <asp:TableCell runat="server" align="center">&nbsp;</asp:TableCell>
    <asp:TableCell runat="server" align="center">&nbsp;</asp:TableCell>
</asp:TableRow>

CSS:

Note, this works in the snippet I created. You may have to tweak this. In my example the radio button was too far left.

.radioButtonCell
{
    padding-left:15px;
}

Upvotes: 1

Related Questions