Clever Geek Handbook

ASP.NET CheckBoxList ListItem not wrapping in one line

I am having problems using the CheckBoxList control.

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

each ListItem appears on two separate lines instead of 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 download ( http://metroui.org.ua/ ).

EDIT: @Royi Namir: I tried to remove the tag using JQuery, but it doesn't work. The tag still exists.

    <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>

Strike>

EDIT 2: @Royi Namir: The problem is not with the tag, because when I remove the second element, the view source appears without the tag, but still on two 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>

Strike>

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

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


source to share


4 answers


I had the same problem. The text portion of the checkbox control is displayed as a label when the RepeatLayout parameter is specified as a stream.

So this is due to the bootstrap, which sets all labels to be displayed as a block. To solve this problem, causing any problems for the rest of the application, I wrapped my checkbox in a div or p with a specific class and set in my css:



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


source


Set this attribute to your CheckBoxList:

  <asp:CheckBoxList    RepeatLayout="Flow"

This will cause the render to appear as a table, just like you do.



Extra br 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.

+1


source


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

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

<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 is displayed, you can use tables, list types and flow (Flow removes table borders and just displays checkboxes and text)

Repeat Direction allows you to select the direction in which items are displayed. In my case, this was what I had to use to change the list to display vertically horizontally.

+1


source


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>
0


source






More articles:


All Articles