This is a migrated thread and some comments may be shown as answers.

Telerik sass default theme renders the dot overlap with the label

2 Answers 8 Views
RadioButton
This is a migrated thread and some comments may be shown as answers.
Yudith
Top achievements
Rank 1
Veteran
Yudith asked on 08 Sep 2020, 08:24 AM

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.

2 Answers, 1 is accepted

Sort by
0
Yudith
Top achievements
Rank 1
Veteran
answered on 08 Sep 2020, 08:58 AM

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?

0
Accepted
Tsvetomir
Telerik team
answered on 09 Sep 2020, 01:08 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
RadioButton
Asked by
Yudith
Top achievements
Rank 1
Veteran
Answers by
Yudith
Top achievements
Rank 1
Veteran
Tsvetomir
Telerik team
Share this question
or