Kendo Checkbox and Label wrapping behaviour change

[David]

Hi,

We recently updated our .NET Core web app from Kendo UI v2019.3.1023 to Kendo UI v2020.1.219. The code snippet below used to produce a checkbox and label that didn't wrap, but after the update the label wraps onto a second line if the width of the window is decreased. I have confirmed that the source of the change is in kendo.bootstrap-v4.min.css by copying the contents of the Kendo UI v2019.3.1023 kendo.bootstrap-v4.min.css back into the project and observing that no wrapping occurs. Was this an intended change in behaviour? Is there anything we can do other than to add a white-space: nowrap style to every single col class that has a Kendo CheckBoxBuilder in it?

Kind regards,

David

<div class="row align-items-center p-1">
        <div class="col-4">Header</div>
        <div class="col-2">
            @Html.Kendo().CheckBox().Name("CheckboxName").Label("Checkbox")
            @Html.HiddenFor(model => model.Checkbox)
        </div>

[Denitsa]

Hi David,

 

Indeed we have some significant changes to the checkboxes in UI for ASP.NET Core R1 2020 release. It seems these changes also affect the wrapping of the checkboxes and their labels.

I have logged an issue in our public repository that you may subscribe to watch so you can be notified when there is any new development:

https://github.com/telerik/kendo-ui-core/issues/5676

Meanwhile, as a workaround,  you could add a white-space: nowrap or display: inline style like this:

        .col-2 li {
            white-space: nowrap;
        }

 

       .k-checkbox-label{
            display: inline;
        }

 

If you have a number of different classes where you use checkbox, you could add the style definitions in external .css file and refer it instead of applying inline.

 

Finally as a token of gratitude for bringing the issue to our attention I have updated your Telerik points.

Regards,
Denitsa
Progress Telerik