Align RadCheckBoxList items

8 posts, 1 answers
  1. Jacques
    Jacques avatar
    17 posts
    Member since:
    Mar 2013

    Posted 13 Apr Link to this post

    Hi there,

    I want to align the items to the left (see attachment).
    Any idea?

    Regards,

    Marcel

  2. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 13 Apr Link to this post

    Hi Marcel,

    The RadCheckboxList items are left aligned by default. Can you, please make sure that there are not any additional styles that are changing the items layout in your project? If there are no such, please, share the exact configuration leading to the behavior from the attached image so we can advice you further on this matter.

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jacques
    Jacques avatar
    17 posts
    Member since:
    Mar 2013

    Posted 14 Apr Link to this post

    Hi Vessy,

    Thank you for the quick reply.
    I can confirm no additional styling is used.

    I use the following code:
        <head>
            <title>RadCheckBoxList2</title>      
        </head>
        <body>
            <form id="form1" runat="server">
     
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
             
                <telerik:RadCheckBoxList ID="rcbTest" Width="150" runat="server"></telerik:RadCheckBoxList>
     
            </form>
        </body>
    </html>
     
    protected void Page_Load(object sender, EventArgs e)
            {
                // Fill RadCheckBoxList.
     
                // Get values by property ID.
                EPO.Data.Selector2.Value.GetValuesByPropertyID getValuesByPropertyID = new EPO.Data.Selector2.Value.GetValuesByPropertyID();
                getValuesByPropertyID.PropertyID = 133;     // Property ID
                getValuesByPropertyID.Main();
     
                // Create RadCheckBoxList.
                rcbTest.DataBindings.DataValueField = "Value ID";
                rcbTest.DataBindings.DataTextField = "Data";
                rcbTest.DataSource = getValuesByPropertyID.ValueTable;
                rcbTest.DataBind();
            }

     

    The above code results in output shown in attachment 'RadCheckBoxList1.PNG' 
    When I change the Width="150" in Width="300" the items are aligned to the left which is OK (see  'RadCheckBoxList2.PNG')

    If you want I can sent you the test project.

    Any idea why the items are not aligned correctly when the Width of the RadCheckboxList is set.

    Regards,

    Marcel

  4. Answer
    Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 18 Apr Link to this post

    Hi Jacques,

    Thank you for the provide snippet. Indeed the multiline items of the CheckboxList are centered horizontally, you can change this behavior with a similar style:
    .RadCheckBoxList span.rbText.rbToggleCheckbox {
       text-align: left;
    }

    I hope this helps.

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jacques
    Jacques avatar
    17 posts
    Member since:
    Mar 2013

    Posted 19 Apr in reply to Vessy Link to this post

    Hi Vessy,

    Thank you for your support, It is working.

    Regards,

    Marcel

  6. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 19 Apr Link to this post

    Hi,

    You are welcome, Marcel - I am glad the suggested solution is working for you. Let us know should any further question occur.

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Jacques
    Jacques avatar
    17 posts
    Member since:
    Mar 2013

    Posted 21 Apr in reply to Vessy Link to this post

    Hi Vessy,

    Just a last question:
    The code you sent me only works when the checkbox is not selected.
    Do you know the CSS for left alignment when the checkbox is selected?

    Regards,

    Marcel

  8. Vessy
    Admin
    Vessy avatar
    1678 posts

    Posted 25 Apr Link to this post

    Hi Marcel,

    The below style includes both the CSS selectors for checked and not checked items:
    .RadCheckBoxList span.rbText.rbToggleCheckbox,
    .RadCheckBoxList span.rbText.rbToggleCheckboxChecked {
      text-align: left;
     }

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top