How to make ASP CheckBoxList labels stay on same line as checkbox

Question

This may be a common problem but I'm struggling to find a solution that will fix it

I have a modal popup I am displaying with jQuery, this popup contains a list of Checkboxes and a Button, the code looks like:

<div id="dialog" title="Notify Users" >
    <div style="width:100%; height:500px; overflow:auto;">
        <asp:CheckBoxList ID="chkNotify" 
            runat="server" 
            CssClass="checkboxlist_nowrap"
            RepeatLayout="Table" 
            /> 
    </div>
    <asp:Button ID="btnSaveNotifications"
        runat="server" 
        Text="Ok"
        />
</div>

The popup displays correctly however the labels for each checkbox are on the line below the checkbox. I cant seem to figure out why this happens, at first I assumed that the div containing the CheckBoxList was simply too small so I gave each div a fixed width, but that didn't help anything.

I have also tried applying this CSS

.checkboxlist_nowrap tr td label
{
    white-space:nowrap;
    overflow:hidden;
    width:100%;
}

It didnt help but im unsure about if the stylesheet actually was used even though I have:

  <link href="../css/HelpDesk.css" rel="stylesheet" type="text/css" />

in my head tags.

Can anyone suggest anything else I can try?

Thanks

UPDATE: Here is my Jquery:

 $(function () {
    $("#dialog").dialog({
       autoOpen: false,
       show: "blind",
       width: 400, 

       hide: "explode"
    });

And here is how I populate the CheckBoxList:

 Private Sub populateCheckBoxList()

      Dim notificationList As DataTable
      notificationList = dbGetNotificationsList(1)

      For Each dr As DataRow In notificationList.Rows

         Dim li As New ListItem
         li.Text = dr("FullName")
         li.Value = dr("ID")

         If (dr("Checked") = 1) Then
            li.Selected = True
         Else
            li.Selected = False
         End If
         chkNotify.Items.Add(li)

      Next

   End Sub

I have tried moving the CheckBoxList to just inside the form tag so that no other styles can be applied and nothing should affect it however I still get the same issue.

Formyl

#19892181 – Geoponic

Answer 1

Marking this as closed as I never managed to figure it out and the issue has been passed to another dev. Will post the answer here when I get it back.

I'd really appreciate people not down voting me for marking this as closed, I don't work at the company anymore, I have absolutely no way of recreating the issue or verifying any solutions people post and at the time I set this to closed none of the provided solutions fixed the problem.

Formyl

@Nick Sadly no, I never got any answer and left the job so there is no way for me to verify any future answers. – Formyl

Why am I getting downvoted for marking this as closed? I cant delete the post, there is no way of verifying anything people suggest as I dont work at the same place anymore, and I never found a solution. – Formyl

Answer 2

For me none of the above solutions worked and so i looked up the exact HTML rendered and found that the label had the display property set to block. Changing it to inline worked:

.checkboxlist_nowrap label
{
     display:inline;
}

Torture

Answer 3

I'm thinking it's a CSS problem... I couldn't reproduce the whitespace wrapping with what you posted. You might want to make sure the width of your dialog is set correctly in jQuery.

Something like:

$("#dialog").dialog({
    modal: true,
    autoOpen: false,
    draggable: false,
    resizable: false,
    width: 400,
    buttons: {
        Update: function () {
            $(this).dialog('close');
        },
        Cancel: function () {
            $(this).dialog('close');
        }
    }
});

Also, a really great way to check CSS (and javascript) is using Google Chrome's Dev Tools. They're packaged with Chrome. All you have to do is right-click on the element you're having trouble with and hover over the HTML in the window. It'll tell you all the classes being applied to it and will show you the margins/width/everything. It has been infinitely helpful for me.

Ealing

Thanks for the reply, Im going to update my post with my Jquery but I just tried it by setting the width to wider than needed and i still get the same error :( – Formyl

Answer 4

I was having a similar problem. Found an answer on another stack overflow article which I have pasted below.

You want to have display:inline applied to the element that ASP generates to hold the label text, not the control itself. So, for example:

<style type="text/css">
label { display: inline-block; }
</style>
<asp:CheckBox Text="This text appears on same line as checkbox" runat="server" />

Bing

Thanks for adding this. I used your example to fix my issue with a Razor checkbox by adding my custom class (defining just "display: inline") to the @Html.LabelFor call. Adding it one or two levels up on divs that wrap the entire checkbox+label did not work. – Allene

Answer 5

Using an ASP.NET checkbox control, I had the same problem with an unwanted linefeed between a checkbox and its label. I believe the problem reared its ugly head because this section of code was wrapped in a class that applied a {display: block} style. I solved the problem by first adding a CssClass attribute to the checkbox:

<asp:Repeater
    ID="UserRoleList"
    runat="server">
    <Itemtemplate>
        <asp:CheckBox
            ID="RoleCheckBox"
            CssClass="sameLine"
            AutoPostBack="true"
            Text='<%# Container.DataItem %>'
            runat="server" />
        <br />
    </ItemTemplate>
</asp:Repeater>

Looking at the rendered html in the browser by viewing the source I saw that the style added a span and that the asp.net checkbox control was rendered within the span as an input tag and a label. I tried applying my style to just the span alone but it didn't work nor did applying the style to the input tag. What worked for me was applying the style to the label:

.sameLine label {
    display: inline;
}

Executioner

I am so surprised why no one is marking this answer up. The question is not so much about jQuery, rather it is about asp:CheckBoxList and this solution perfectly solves it! – Glider

Answer 6

An article in code project says:

"The available text length for each CheckBox/RadioButton has been limited (I don’t know what’s causing the limitation), so the text will begin to wrap after 8 characters if you use multiple words. This is why the ‘white-space: nowrap’ is used in the CSS to eliminate that."

The Solution for the alignment issue is that you need to set the style property of the checkbox list tag as,

style="white-space:nowrap";

I think that should work for the plain HTML tags also.try using the same style statement in the css file too.

Here is the Link that i am sharing now Please refer to it.

Zoography

Answer 7

Set property RepeatLayout = 'Flow' of CheckBoxList

By default, repeat layout is set to 'Table' due to that it comes to new line.

If layout is set to 'Flow' then checkboxes will be displayed on same line.

Graduate

Answer 8

I had the same exact problem. For me, it was setting the width of the input to 100% in the css file that caused the problem. the checkbox control is made up of the input tag and the label tag. I set the input tag to take up 100% of the width and that caused the label tag to start from a new line. My advice is check your css file!

Joker

Answer 9

As long as this was the first link in google for this question - posting answer from another answered question Asp:CheckBox checkbox and text are not on the same line

Simple style display:inline-block; fixes issue. Of course, you'll want to keep in in CSS file, rather than in asp control properties. :)

<asp:CheckBox style="display:inline-block;" ID="CheckBoxShowParameters" runat="server" Text="Show Parameters" />

Pompon

Answer 10

.checkboxlist_nowrap
{
white-space:nowrap;
display:inline-block;
}

Of

Please add explanation to your answer for future visitors. – Flanigan

Answer 11

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkboxlist_nowrap" RepeatDirection="Horizontal">

.checkboxlist_nowrap label
    {
        font-weight:400;
        padding-left:3px;
    }

Use RepeatDirection property. This worked for me!!

Corody