Based on the content and title you described, I'm not sure if you need to wrap the text in the options automatically.
What you need to know is that the CheckBoxList control will be rendered as a table element on the page. If you need to make some style adjustments on the options, you could try something like this:
You could set spaces between checkbox and label text though padding or margin. And if the option does not need to wrap, you can delete the word-wrap attribute.
Best regards,
Xudong Peng
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Please re-size your form to half the size and see if these labels do stay next to the checkboxex/
In my case, shrinking form makes labels to display right below the check boxes. And, if I make the screen larger then the check boxes and labels stay together but there is a lot of space between the left border of the panel and the checkbox.
In my example, unless the page size is reduced to less than the
sum of the width of the Label and the Checkbox, the situation you described will appear. Otherwise, the page will be displayed normally, and you could also customize the width of the Label.
Result:
I am not sure if you have tried the code I provided, or tested it with any modifications.
Best regards,
Xudong Peng
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
75 Points
466 Posts
No Word-wrap in CheckListBox
Nov 25, 2020 04:35 PM|NJ2|LINK
I have tried several option but it still word-wraps.
Also, the labels are right next to the checkbox. How do I add a couple of spaces between them?
<div class="column" style="background-color:#bbb; overflow:auto;"> <h2>Existing Documents</h2> <asp:Panel ID="checkBoxPanel" runat="server" CssClass="scrollingControlContainer" Height="195px" border="solid" > <asp:CheckBoxList ID="lstExistingDocs" runat="server" style="display:inline; white-space: normal;"></asp:CheckBoxList> </asp:Panel> </div>.scrollingControlContainer { overflow-x: auto; overflow-y: scroll; border:groove; }Participant
1840 Points
576 Posts
Re: No Word-wrap in CheckListBox
Nov 26, 2020 03:28 AM|XuDong Peng|LINK
Hi NJ2,
Based on the content and title you described, I'm not sure if you need to wrap the text in the options automatically.
What you need to know is that the CheckBoxList control will be rendered as a table element on the page. If you need to make some style adjustments on the options, you could try something like this:
<head runat="server"> <title></title> <style> .scrollingControlContainer { overflow-x: auto; overflow-y: scroll; border:groove; } #lstExistingDocs td label { float: right; padding-left:20px; width:400px; word-wrap:break-word; } </style> </head> <body> <form id="form1" runat="server"> <div> <div class="column" style="background-color: #bbb; overflow: auto;"> <h2>Existing Documents</h2> <asp:Panel ID="checkBoxPanel" runat="server" CssClass="scrollingControlContainer" Height="195px" border="solid"> <asp:CheckBoxList ID="lstExistingDocs" runat="server" Style="display: inline; white-space: normal;"> <asp:ListItem Text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"></asp:ListItem> <asp:ListItem Text="BBBBBBBBBBBB"></asp:ListItem> <asp:ListItem Text="CCCCCCCCCCCC"></asp:ListItem> <asp:ListItem Text="DDDDDDDDDDDD"></asp:ListItem> </asp:CheckBoxList> </asp:Panel> </div> </div> </form> </body>Result:
You could set spaces between checkbox and label text though padding or margin. And if the option does not need to wrap, you can delete the word-wrap attribute.
Best regards,
Xudong Peng
Member
75 Points
466 Posts
Re: No Word-wrap in CheckListBox
Nov 27, 2020 05:51 AM|NJ2|LINK
Please re-size your form to half the size and see if these labels do stay next to the checkboxex/
In my case, shrinking form makes labels to display right below the check boxes. And, if I make the screen larger then the check boxes and labels stay together but there is a lot of space between the left border of the panel and the checkbox.
Participant
1840 Points
576 Posts
Re: No Word-wrap in CheckListBox
Nov 27, 2020 08:28 AM|XuDong Peng|LINK
Hi NJ2,
In my example, unless the page size is reduced to less than the sum of the width of the Label and the Checkbox, the situation you described will appear. Otherwise, the page will be displayed normally, and you could also customize the width of the Label.
Result:
I am not sure if you have tried the code I provided, or tested it with any modifications.
Best regards,
Xudong Peng