Checkboxlist alignment

1 Answer 15 Views
CheckBox
Omar
Top achievements
Rank 1
Veteran
Iron
Omar asked on 14 Jun 2022, 06:12 PM

Hi,

I have a "checkbox list" with a few items. The problem is, that when the text for the item is too long it will change its alignment from let to centre automatically.

I need that text to stay left alignment no matter how long it is. 

Please see the attached image to understand what I mean.

Regards,

Omar

 

 

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Doncho
Telerik team
answered on 17 Jun 2022, 12:30 PM

Hi Omar,

You can use some custom CSS to modify the built-in appearance of the RadCheckBoxList in the desired manner.

To narrow down the issue, I would suggest inspecting the HTML elements and the styles applied to them. You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

Here is an example you can test as an idea:

<style>
    .container {
        border: 1px solid black;
        width: 450px;
    }

    .RadCheckBoxList .RadCheckBox {
        width: 100%;
        float: left;
    }

        .RadCheckBoxList .RadCheckBox .rbText {
            width: 80%;
            float: left;
            text-align:left;
        }

        .RadCheckBoxList .RadCheckBox .rbIcon {
            float: left;
        }
</style>

<div class="container">
    <telerik:RadCheckBoxList runat="server">
        <Items>
            <telerik:ButtonListItem Text="Lorem ipsum dolor " Value="1" />
            <telerik:ButtonListItem Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum erat rutrum elementum accumsan. Sed semper magna vitae tincidunt dapibus." Value="2" />
            <telerik:ButtonListItem Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." Value="3" />
        </Items>
    </telerik:RadCheckBoxList>
</div>

I hope this will give you an idea for applying further customizations to the output.

Please let me know if any questions come up.

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
CheckBox
Asked by
Omar
Top achievements
Rank 1
Veteran
Iron
Answers by
Doncho
Telerik team
Share this question
or