List Box Text Wrapping - with checkboxes

0 Answers 85 Views
ListBox
Adam
Top achievements
Rank 1
Adam asked on 04 Sep 2023, 07:44 AM

I would like to make long text wrap when using checkboxes. As per the attached image, I would prefer the left margin of the text to align with the green line.

I have attempted to use the sample shown in this article (https://www.telerik.com/forums/long-text-in-radlistbox)  but nothing worked.

Could you please advise the best way to make this change?

Rumen
Telerik team
commented on 05 Sep 2023, 10:14 AM

Using the lightweight rendering of the ListBox I was able to achieve the desired appearance via the following CSS classes:

            <style>
                .RadListBox .rlbItem {
                    white-space: normal;
                    word-wrap: break-word;
                }

                .RadListBox label {
                    display: flex;
                    align-items: flex-start;
                }

                .RadListBox .rlbCheckAllItemsCheckBox, .RadListBox .rlbCheck {
                    margin-top: 3px;
                    margin-right: 5px;
                }
            </style>
            <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1" runat="server" CheckBoxes="true" ShowCheckAll="true" Width="300"
                Height="300px">
                <Items>
                    <telerik:RadListBoxItem Text="Science Fiction Science Fiction Science Fiction Science Fiction Science Fiction Science Fiction Science Fiction Science Fiction " />
                    <telerik:RadListBoxItem Text="Arts" />
                    <telerik:RadListBoxItem Text="Biographies" />
                    <telerik:RadListBoxItem Text="Children's Books" />
                    <telerik:RadListBoxItem Text="Computers &amp; Internet Computers &amp; Internet Computers &amp; Internet" />
                    <telerik:RadListBoxItem Text="Cooking" />
                    <telerik:RadListBoxItem Text="History" />
                    <telerik:RadListBoxItem Text="Fiction" />
                    <telerik:RadListBoxItem Text="Mystery" />
                    <telerik:RadListBoxItem Text="Nonfiction" />
                    <telerik:RadListBoxItem Text="Romance" />
                    <telerik:RadListBoxItem Text="Travel Travel Travel Travel Travel Travel Travel Travel Travel " />
                </Items>
            </telerik:RadListBox>

 

No answers yet. Maybe you can help?

Tags
ListBox
Asked by
Adam
Top achievements
Rank 1
Share this question
or