How to add spacing between checkboxlist items?

Question

I have checkboxlist within a table I am using. The checklist I need to line up with checkboxes in the second column. The spacing of each row of the textboxes(second row) is 26px. I can not find how to do spacing between items on checkbox list. Setting margins only does the outside of the list not items within.

I tried cellspacing but I cant get it quite lined up.

Update 2

<td style="vertical-align: top" rowspan="7"  Width="175" style="padding: 0;">
                <asp:CheckBoxList ID="cbtasklist" runat="server" CssClass="radiobutton">
                    <asp:ListItem Value="Task 1">Task 1</asp:ListItem>
                    <asp:ListItem Value="Task 2">Task 2</asp:ListItem>
                    <asp:ListItem Value="Task 3">Task 3</asp:ListItem>
                    <asp:ListItem>Task 4</asp:ListItem>
                    <asp:ListItem Value="Task 5">Task 5</asp:ListItem>
                    <asp:ListItem Value="Other1">Other</asp:ListItem>
                    <asp:ListItem Value="Other2">Other</asp:ListItem>
                </asp:CheckBoxList>


                    </td>
                <td class="auto-style187" style="vertical-align: top" colspan="2">

                    &nbsp;</td>


.auto-style187 {
        height: 26px;
        width: 357px;
    }

Update 3: Would it be easier to do a checkbox for each line so I can use the same CSS as the other column?

The reason for the checkbox list is for validation that 1 must be selected.

Have you tried the CheckBoxList.CellSpacing property? msdn.microsoft.com/en-us/library/… — sr28
– sr28, Commented Sep 20, 2016 at 15:00

Asifuzzaman · Accepted Answer · 2016-09-20 17:30:10Z

I hope you are looking for this

   <form id="form1" runat="server">
<div style="width: 100%">



    <table class="auto-style1">
        <tr>
            <td class="auto-style3">
                <asp:CheckBoxList ID="CheckBoxList1" runat="server" Height="163px">
                    <asp:ListItem>a</asp:ListItem>
                    <asp:ListItem>b</asp:ListItem>
                    <asp:ListItem>c</asp:ListItem>
                    <asp:ListItem>d</asp:ListItem>
                    <asp:ListItem>e</asp:ListItem>
                    <asp:ListItem>f</asp:ListItem>
                </asp:CheckBoxList>
            </td>
            <td class="auto-style8">
                <table class="auto-style1">
                    <tr>
                        <td class="auto-style5">
                            <asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
                        </td>
                        <td>aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style6">
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                        </td>
                        <td class="auto-style7">aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style5">
                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                        </td>
                        <td>aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style10">
                            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                        </td>
                        <td class="auto-style11">aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style12">
                            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                        </td>
                        <td class="auto-style13">aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style5">
                            <asp:TextBox ID="TextBox6" runat="server" OnTextChanged="TextBox6_TextChanged"></asp:TextBox>
                        </td>
                        <td>aaaa</td>
                    </tr>
                </table>
            </td>
            <td class="auto-style4"></td>
        </tr>
        <tr>
            <td class="auto-style2">&nbsp;</td>
            <td class="auto-style9">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="auto-style2">&nbsp;</td>
            <td class="auto-style9">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="auto-style14"></td>
            <td class="auto-style15"></td>
            <td class="auto-style11"></td>
        </tr>
        <tr>
            <td class="auto-style2">&nbsp;</td>
            <td class="auto-style9">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>



    </div>

    </form>

see the image

I just took table inside a table .You can just remove the unwanted column as your desire

don't forget to edit the text box lineup its up to you

The text is slightly off to the text boxes which they want perfect lined up.

Hugo Dimas · Accepted Answer · 2016-09-20 15:41:36Z

0

why don't you try with this on your CSS:

checkbox { padding-bottom: 10px; }

answered Sep 20, 2016 at 15:41

Hugo Dimas

242 bronze badges

Collectives™ on Stack Overflow

How to add spacing between checkboxlist items?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related