ASP.NET CheckBoxList ListItem not wrapping in one line

Question

I'm having some trouble when using the CheckBoxList control.

As you can see in this picture: https://i.stack.imgur.com/IkHXT.png,

each ListItem is showing in 2 separate lines instead of just one.

This is the code:

        <asp:CheckBoxList ID="cblTest" runat="server">
                <asp:ListItem Text="First item"></asp:ListItem>
                <asp:ListItem Text="Second item"></asp:ListItem>
        </asp:CheckBoxList>

For reference, I'm using the MetroUI-CSS (http://metroui.org.ua/) bootstrap.

EDIT: @Royi Namir: I tried to remove the tag using JQuery but it's not working. The tag is still there.

    <asp:CheckBoxList ID="cblTest" RepeatLayout="Flow" runat="server">
        <asp:ListItem Text="First item"></asp:ListItem>
        <asp:ListItem Text="Second item"></asp:ListItem>
    </asp:CheckBoxList>
    <script type="text/javascript">
        $('#cblTest').find('br').remove();
    </script>

EDIT 2: @Royi Namir: The problem is not the
tag because when I remove the second item the view source shows up without the tag but still in 2 separate lines.

<span id="body_cblTest"><input id="body_cblTest_0" type="checkbox" name="ctl00$body$cblTest$0" value="First item" /><label for="body_cblTest_0">First item</label></span>

EDIT 3: The problem was in the MetroUI-CSS bootstrap (metro-bootstrap.css). As @drigomed said, it was setting all labels to display as block.

.metro label {
  display: block; /*set this to inline-block*/
  margin: 5px 0;
}

upload jsfiddle/jsbin ( of the generated view source) – Royi Namir Sep 11 '14 at 07:55 — Royi Namir, Sep 11 '14 at 07:55
Here it is: http://jsfiddle.net/cd2m2Lyj/1/ – user3627041 Sep 11 '14 at 08:07 — user3627041, Sep 11 '14 at 08:07

Royi Namir · Answer 1 · 2014-09-11T08:44:21.180

2

Set this attribute to your CheckBoxList :

  <asp:CheckBoxList    RepeatLayout="Flow"

It will cause your rendering to to render as table as you did.

The extra br is inserted via asp.net : http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeatlayout(v=vs.110).aspx

enter image description here

just use JS to remove it.

edited Sep 11 '14 at 08:44

answered Sep 11 '14 at 08:10

Royi Namir

144,742
138
468
792

I already tried that before, it didn't work. I think it may be a problem of the bootstrap. – user3627041 Sep 11 '14 at 08:27
@user3627041 after changing it to flow , upload a new jsbin ( viedwsource) – Royi Namir Sep 11 '14 at 08:28
@user3627041 there you go. you had BR there. – Royi Namir Sep 11 '14 at 08:34
Yeah I see the , but that's the one that separates the first item from the second one. There's no in between the and the of each item so I don't know why they are loading in 2 separate lines. – user3627041 Sep 11 '14 at 08:41
The problem is not the tag. See my second edit. – user3627041 Sep 11 '14 at 18:05
Have you tried just setting a width on the checkboxlist? I've had this problem. If you want it all on one line use repeatcolumns in the check box list attribute – Chris Sep 11 '14 at 20:04
In CSS, you can .groupsList br { display: none; } – Rajitha Bandara Feb 20 '15 at 16:25

score 2 · Answer 2 · answered Jan 11 '17 at 14:20

I had the same issue but for me the solution was different as I didn't have any previous display properties set for label.

There are two properties of the CheckBoxList that I played with and this sorted my list exactly how I wanted them:

<asp:CheckBoxList ID="cbInterimRent" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" >
    <asp:ListItem Value="1">Yes</asp:ListItem>
    <asp:ListItem Value="0">No</asp:ListItem>
</asp:CheckBoxList>

Repeat Layout changes the way it looks, you can use table, list types and flow (Flow removes the table borders and just displays the checkboxes and text)

Repeat Direction allows you to choose the direction in which the items appear. In my case this was what I had to use to change my lists from displaying Vertically to Horizontally.

drigomed · Accepted Answer · 2016-02-11T17:34:21.690

1

I've had the same problem. The text part of the checkbox control is rendered as a label when the RepeatLayout is set as Flow.

So, it happens because of bootstrap, which sets all labels to display as block. To solve this whitout causing any problems to the rest of the app, I've wrapped my checkbox into a div or p with a specific class, and set into my css:

.pCheck label {
    display: inline-block;
    margin-left: 5px;
}

edited Feb 11 '16 at 17:34

answered Sep 11 '14 at 19:21

drigomed

186
2
9

Exactly, it was the bootstrap all along. I just fixed it a few minutes ago. I set the display as "inline" but I suppose it's better to set it as inline-block as you say. – user3627041 Sep 11 '14 at 20:57

score 0 · Answer 4 · answered Aug 17 '17 at 08:44

Below code works for me. RepeatDirection to Horizontal.

 <asp:RadioButtonList ID="rbSurveyInsurance" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
                 <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
                  <asp:ListItem Text="No" Value="0"></asp:ListItem>
  </asp:RadioButtonList>

ASP.NET CheckBoxList ListItem not wrapping in one line

4 Answers4