Telerik sass default theme renders the dot overlap with the label

[Yudith]

I use Telerik Kendo.UI for ASP.NET MVC.

Here is my view to render the radio button.

<div class="col-xs-2"></div>

Here is the css that I include,
<div class="col-xs-8">
    <div class="row text-center">
        <div class="col-xs-12">
            <h1>KENDO UI FORM</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <form class="k-form">
                <fieldset>
                    <div class="form-field">
                        @(Html.Kendo().RadioButton().Name("engine1").Checked(true).HtmlAttributes(new { @name = "engine" }).Label("1.4 Petrol, 92kW"))
                    </div>
                    <div class="form-field">
                        @(Html.Kendo().RadioButton().Name("engine2").HtmlAttributes(new { @name = "engine" }).Label("1.8 Petrol, 118kW"))
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>
<div class="col-xs-2"></div>

 

Here is the css that I include,

1.<link rel="stylesheet" href="@Url.Content("~/content/kendo/2019.3.1023/kendo.bootstrap.min.css")" />
2.<link rel="stylesheet" href="@Url.Content("~/content/kendo/2019.3.1023/kendo.common-bootstrap.min.css")" />
3.<link rel="stylesheet" href="@Url.Content("~/css/telerik-default-theme.css")"

 

I attached the result in the attachment.

 

 

Is there any additional css to make this works?

Thank you.

[Yudith]

I think I found the solution.

I need to remove the kendo.common-bootstrap.min.css reference.

According to this documentation https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes, "Avoid referencing the kendo.common.min.css and kendo.rtl.min.css files because the exported CSS file contains all styles you need."

Does it mean kendo.common-bootstrap.min.css same with kendo.common.min.css?

[Tsvetomir]

Hi Yudith,

The Kendo UI library exposes two types of themes - SASS-based themes and LESS-based themes. The LESS-based themes (in particular, bootstrap-v3) requires a common CSS file.

However, the SASS-based themes contain the metrics and dimensions in their particular CSS file and do not require a common CSS file.

Referencing a common CSS file and using a SASS-based theme would lead to unexpected behavior.

 

Regards,
Tsvetomir
Progress Telerik