How to make ASP labels on CheckBoxList on the same line as the 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 displayed using jQuery, this popup contains a list of checkboxes and a button, the code looks like this:

<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 window displays correctly, however, the labels for each flag are in the line below this flag. I can’t understand why this is happening, at first I suggested that the div containing the CheckBoxList was just too small, so I gave each div fixed width, but that didn't help anything.

I also tried applying this CSS

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

This did not help, but I do not know if the stylesheet was actually used, although I have:

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

in my tags.

Can anyone suggest anything else that I can try?

thanks

UPDATE: Here is my jQuery:

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

And this 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 tried moving the CheckBoxList only inside the form tag so that other styles would not be applied and nothing would affect it, but I still get the same problem.

Answer 1

Marking this as closed since I never managed to find out, and the problem was transferred to another developer. Send the answer here when I return it.

I would be very grateful if people did not vote for me to mark it closed, I no longer work in the company, I have absolutely no way to recreate the problem or check any solutions that people publish, and in the time that I installed it closed none of the provided solutions fixed the problem.

Answer 2

For me, none of the above solutions worked, so I looked at the exact HTML rendering and found that the display property was set on the label. Changed it to the built-in line:

 .checkboxlist_nowrap label { display:inline; } 

Answer 3

I think this is a CSS problem ... I could not reproduce the wrapper with what you posted. You might want to make sure that the width of your dialog is set correctly in jQuery.

Sort of:

 $("#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 great way to test CSS (and javascript) is to use the Google Chrome Dev tools. They are packaged in Chrome. All you have to do is right-click on the element that you encounter and hover HTML in the window. It will tell you all the classes applied to it, and show you the fields / width / everything. It was infinitely useful to me.

Answer 4

I had a similar problem. I found the answer to another stack overflow article that I inserted below.

You want to have a mapping: inline is applied to the element that ASP generates to store 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 5

The article in the draft code says:

"The available text length for each CheckBox / RadioButton is limited (I don’t know what causes the restriction), so the text will begin to wrap after 8 characters if you use a few words. That's why white space: nowrap is used in CSS to fix this."

The solution to the alignment problem is that you need to set the style property in the checkbox list tag, as

 style="white-space:nowrap"; 

I think this should work with regular HTML tags as well, using the same style statement in the css file.

Here is the link I'm using right now. Please contact her.

Answer 6

I had the exact same problem. For me, this set the input width to 100% in the css file that caused this problem. The checkbox control consists of an input tag and a tag tag. I set the input tag to 100% of the width, and this caused the tag tag to start on a new line. My advice is to check your css file!

Answer 7

Using an ASP.NET control, I had the same problem with an unwanted line feed between a checkbox and its label. I believe that the problem caused an ugly head because this section of code was wrapped in a class that applied the {display: block} style. I solved the problem by first adding the 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 rendering of html in a browser, looking at the source code, I saw that the style added a range and that the asp.net control was displayed within the range as an input tag and label. I tried to apply my style to only one opening, but it did not work and did not apply the style to the input tag. What worked for me is to apply a style to the shortcut:

 .sameLine label { display: inline; } 

Answer 8

Set property RepeatLayout = 'Stream' CheckBoxList

By default, reassembly is set to Table because it arrives on a new line.

If the layout is set to "Stream", then the flags will be displayed on one line.

Answer 9

While this was the first google link for this question - sending an answer from another answer to the question Asp checkbox: CheckBox and text are not on the same line

Simple display style: built-in block; fix the problem. Of course, you'll want to save it in a CSS file, not in asp control properties. :)

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

Answer 10

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

Answer 11

 <asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkboxlist_nowrap" RepeatDirection="Horizontal"> .checkboxlist_nowrap label { font-weight:400; padding-left:3px; } 

Use the RepeatDirection property. It worked for me!