Any consideration to a Bootstrap Telerik Skin that matches the condensed/small Bootstrap sizing. Specifically for input controls -- like textbox and combobox, etc.
Love the Bootstrap skin - its just a bit large. And so many of the other Telerik skins are gradient/glossy in their look - we could use more "simple & clean" options.
Or is there some .css based method (w/o going through every control) to affect the existing skin?
14 Answers, 1 is accepted
The Bootstrap skin is designed to be flexible in the sense that if you change the font size the component should grow and shrink.
We do not, however, have the various sizes available in Bootstrap e.g. small, medium, large and so on buttons, inputs etc.
That's not an easy task and thus we do not have it used in our controls.
BUT, there is a long path that should be walked. For instance, most of the differences between classic and lightweight rendering are mere structural changes, but we still use the same class names. Those class names, unfortunately, are "scoped" to individual controls. For instance, if you have and arrow "component" in RadComboBox it would be rcbArrow, in RadEditor it would be reArrow, where as it's the same arrow.
The solution is pretty straightforward -- change the class names, use common abstract structures and things will workout.
So while the path seems clear, it's not quick / easy. Changing the class names / structure will make currently existing skins obsolete and practically useless. That's the same reason why skins for classic rendering will not work on lightweight and vice versa.
That's why we have built a new tool for skins called ThemeBuilder that can not only create skins for lightweight controls, but can also save the setting of the skins e.g. the color values that were in use. So in a later moment, if add something new, or change something existing, anyone can very easily import the settings back into ThemeBuilder and regenerate the theme.
So that's about it on different states of skins...
Is there a list anywhere of what controls inherit page styles and which do not?
Example - using Q1 2016 - a RadGrid w/ the Bootstrap theme will inherit the body font settings - so if I use Verdana 11px it looks exactly how I'd like.
RadComboBox does NOT do this - BUT if I set "Font-Size="11px"" on the combobox itself - it scales down nicely.
Is there an easy way to handle this? Use app_themes to set font size perhaps? Or is there a telerik specific solution?
for 2016 Q1 we didn't quite managed to "untie" the font size so it can be inherited for all controls. That being said, we are targeting 2016 Q1 SP1 for this feature.
So when we complete the transition, we'll create the list, but it goes basically like this:
* Material and Bootstrap skin retain their font family and font size
* Metro skins retain their font family and inherit font size
* All other skins inherit both font size and font family
* All controls should be customizable via font-size property either the serverside one or via CSS
That applies to all controls that have light-weight rendering.
And since, we have not prepared yet an article, would you say the above is fit for help article content, or perhaps we should elaborate?
Glad to hear about SP1 - but I'm still a bit confused.
Material and Bootstrap skin retain their font family and font size
Right now - if I look at RadGrid using Bootstrap Skin I see that it keeps its FONT FAMILY but inherits the FONT SIZE from the page.
ie my page is set to Verdana 12px - RadGrid shows "Helvetica Neue",Helvetica,Arial,sans-serif at 12px.
So this will change and Bootstrap won't be affected by the page? Or am I misunderstanding?
(this all started because I want to use Bootstrap Skin - but the default font size is too large - I find set to 12px it works perfectly - and I hoped to do this through inheritance and not setting it on every control or through skins.)
As we are not completely done with the migration, we could consider dropping the font-size from Bootstrap skin. After all, that's what they did with Bootstrap 4 (still alpha, but coming)
why would material and bootstrap be excluded? I for one would be VERY interested in a bootstrap skin that adapted throughout all the controls (in fact - such a thing was described as the plan when I inquired a few months back.)
originally, we wanted to have the controls appear the same, that's why we wanted to go with fixed font size. However, inheriting the font-size from the body element will solve the issue.
This is why at the end we are removing font-size styles from all controls and skins. (We'll keep the font-name though)
I am bookmarking this thread and I will let you know when you can download an internal build for testing. Since this is a huge change, we would actually appreciate any feedback you may have.
However, if you would like to see the changes earlier, you can do so by downloading the next internal build, due out next Tuesday.
Haven't been able to test the release (non official/CDN supported releases are tough for us to test) - but I thought I might mention that aspects of RadGrid Bootstrap skin are altered by the Bootstrap css. I know Bootstrap's global styles can mess w/ things - but the whole point of the bootstrap skin is to merge the two (Telerik Controls in conjunction w/ Bootstrap.)
It might be worth reviewing. The header changes size and some context menus have issues.
I will ask you to send us a sample project where the issue can be observed. This we will be able to test it locally and provide a proper solution. Thank you for the cooperation.
any updates? so with 2019 SP1 what will be the best practice to change the Bootstrap skin control size?
You can easily control the dimensions of the Telerik controls in lightweight render mode via the font-size CSS setting as explained in the Fonts article. For example via the body class
or the controls' specific classes: