Search code examples
c#cssasp.netcheckboxlist

How to add spacing between checkboxlist items?


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.

enter image description here

enter image description here

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.


Solution

  • 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

    updated one

    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