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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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