CheckboxList to display aligned?

Question

I made a CheckboxList and it will not line up. I don't see any way to control the generated HTML. Right now, the check boxes do not align due to the widths of the <td> of each checkbox label being an automatic width. How can I set the width of this and make all the labels and checkboxes appear in two vertical aligned columns?

My code is simple:

<div style="text-align: center;">
    <p>
    Here you will tell..
    </p>
    <asp:CheckBoxList runat="server" ID="cbl" Width="300px"></asp:CheckBoxList>
    <br />
    <input type="button" id="next_3" value="Next Page" />
</div>

And here is a screen shot

CAbbott · Accepted Answer · 2010-04-27T21:07:54.713

8

You can have it contained within another <div> that does left-aligning like so:

<div style="text-align: center;">
    <p>Here you will tell..</p>
    <div style="text-align: left; width: 50%; margin: auto;">
        <asp:CheckBoxList runat="server" ID="cbl" Width="300px"></asp:CheckBoxList>
    </div> 
    <input type="button" id="next_3" value="Next Page" />
</div>

edited Apr 27 '10 at 21:07

answered Apr 27 '10 at 17:41

CAbbott

8,078
4
31
38

I want it centered in the middle of the screen, but I guess I have to use the margin trick for that. This fixes the problem though and now everything is in straight vertical columns! – Earlz Apr 27 '10 at 17:58
FYI, I modified my example using the `
` centering tip found here: http://stackoverflow.com/questions/114543/how-to-center-div-in-div
– CAbbott Apr 27 '10 at 21:08

Discorde · Answer 2 · 2010-07-05T09:56:17.673

2

Just add the following to your checkboxlist

Style="text-align='left'";

<asp:CheckBoxList ID="CheckBoxList1" runat="server" TextAlign="Right" Style="text-align='left';"
                                        RepeatColumns="10" RepeatDirection="Vertical" CellSpacing="20">

edited Jul 05 '10 at 09:56

answered Jul 05 '10 at 09:45

Discorde

21
3

Part of this worked for me. I know this was nearly 8 years ago but there is no "Style=..." within CheckBoxList in 2018. But the TextAlign helped me as did the CellSpacing. – John Waclawski May 02 '18 at 19:29

score 2 · Answer 3 · answered Aug 03 '11 at 17:30

Without using DIV and other elements and fixed sizes. We can "align checkboxlist text by Setting "float:left" to the checkbox list input type in Css

Please check the following example code:
========================================

.CheckboxList
{

    font-size:14px;
    color:#333333;

}
.CheckboxList input
{
    float:left;
    clear:both;
}

.Aspx Code:
===========

<asp:CheckBoxList runat="server" ID="chlCities" RepeatColumns="2" CssClass="CheckboxList"></asp:CheckBoxList>

score 0 · Answer 4 · answered Apr 27 '10 at 16:45

0

Maybe I don't understand your question, but for me this works fine:

<table>
    <tr>
        <td><input type="checkbox" name="cb1" id="cb1"><label for="cb1">Checkbox 1</label></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb2" id="cb1"><label for="cb2">Checkbox 2</label></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb3" id="cb1"><label for="cb3">Checkbox 3</label></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb4" id="cb1"><label for="cb4">Checkbox 4</label></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb5" id="cb1"><label for="cb5">Checkbox 5</label></td>
    </tr>
</table>

If you can link to or show your HTML, maybe we can give you more help.

answered Apr 27 '10 at 16:45

Robusto

31,447
8
56
77

@Rob it's in a centered div so maybe that has some affect on it? But using `text-align: left` on the checkboxlist doesn't work either. See my edit – Earlz Apr 27 '10 at 16:58
Can you post the markup that is output by ? The answer lies there, I am sure. I never liked those asp controls, those leaky abstractions that invariably output wacky HTML. – Robusto Apr 27 '10 at 17:29
just if your curious, the markup looked almost exactly like yours except for with a `width=` bit.. – Earlz Apr 27 '10 at 17:59

CheckboxList to display aligned?

4 Answers4