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

Sass theme based on bootstrap 4 issues

5 Answers 45 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Dion
Top achievements
Rank 1
Veteran
Dion asked on 16 Nov 2020, 01:02 AM

Hi,

I've been trying to use the sass theme builder to replace the kendo theme delivered by the CDN here https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.bootstrap-v4.min.css

 

When I go on the SASS builder, select to start based on bootstrap 4, I change the colours and download the compiled .css but there are some fundamental differences in the bootstrap source between the standard theme and the generated theme.

My understanding is that the theme produced by the themebuilder should be the same with the only difference being the colour, however I've already noticed the following differences

CDN version

.k-textbox { padding: .375rem .75rem; ...

SASS generated version

.k-textbox { padding: 0; ...

 

another one (slightly different css selected but different display type for form component. 

CDN version 

.k-dropdown .k-dropdown-wrap .k-input, .k-dropdowntree .k-dropdown-wrap .k-input { display: flex;...

SASS version 

.k-dropdown, .k-dropdowntree { display: inline-flex;

 

So in summary if I use the SASS generated version, I will have to override a number of the generated css that is not relating to color theme in order to 'fix' it back to bootstrap standards. This is undesirable. I just want to be able to switch in the SASS generated version to replace the color set which is how I understand it should work.

 

thanks

 

5 Answers, 1 is accepted

Sort by
0
Dion
Top achievements
Rank 1
Veteran
answered on 16 Nov 2020, 02:59 AM

Just further information, I have since found that selecting all controls to be included in the generated css reduces the number of differences between the CDN hosted styles and the SASS generated ones. I suspect there are a number of controls which are relying on css which is not included if you are selectively including controls.

for example the multiselect control which requires the following

.k-display-none, .k-hidden {
display: none !important;
}

which is not included in the generated css if you only select the multiselect control to include in the theme (the loading spinner then stays visible at all times.

 

this can be reproduced on the theme builder page just by making a new theme and only including the multi select. you can see straight away that the loading spinner is always there.

0
Dion
Top achievements
Rank 1
Veteran
answered on 16 Nov 2020, 06:23 AM

adding more things missing from the SASS generated bootstrap based theme

Had to add the following css in a custom css file to fix the location of the clear button and loading indicator in the autocomplete control 

.k-autocomplete .k-clear-value {
    justify-content: center;
    align-items: center;
    position: absolute;
    top: .375rem;
    right: 6.5px;
    flex-direction: row;
    height: 1.5rem;
    line-height: 1.5rem;
}

.k-autocomplete .k-i-loading {
    justify-content: center;
    align-items: center;
    position: absolute;
    top: .375rem;
    right: 6.5px;
    flex-direction: row;
    height: 1.5rem;
    line-height: 1.5rem;
}

 

without it they appear underneath the control if I use only the css downloaded from theme builder

0
Aleksandar
Telerik team
answered on 19 Nov 2020, 06:48 AM

Hello Dion,

Thank you for reaching out. I will need some time to investigate and will get back to you in this thread with additional details.

Regards,
Aleksandar
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/.

0
Accepted
Aleksandar
Telerik team
answered on 19 Nov 2020, 07:45 AM

Hello Dion,

Thank you for your patience. The reason for the observed difference is that the ThemeBuilder is using the latest styles from the master branch of this repository:

https://github.com/telerik/kendo-themes

And there were indeed changes made between v2020.2.513 and the latest v2020.3.1118. What I can suggest is either updating to the latest scripts and styles and creating a custom theme for them using the Themebuilder, or considering cloning locally the distribution matching the version you have v2020.2.513 based on the version compatibility list, modifying the variables you need changed and running a custom build

I hope this clarifies the observed differences.

Regards,
Aleksandar
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/.

0
Dion
Top achievements
Rank 1
Veteran
answered on 19 Nov 2020, 11:11 PM

Thankyou Aleksandar

I'm now referencing the 2020.3.1118 script files and and removed the css I mentioned above that was added and all seems to be working now.

It might help to have the themebuilder say which script version you need to reference, I don't see that mentioned anywhere on the theme builder site, so it didnt even occur to me.

thanks again

Tags
General Discussions
Asked by
Dion
Top achievements
Rank 1
Veteran
Answers by
Dion
Top achievements
Rank 1
Veteran
Aleksandar
Telerik team
Share this question
or