Bootstrap Small/Condensed

[Bill O'Neil]

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?

[Ivan Zhekov]

Hi, Bill.

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.

Regards,
Ivan Zhekov
Telerik

[Ivan Zhekov]

One last bit -- that's not to say we are not keen on adding such features in our controls. Quite the contrary. We are keen, very keen.

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...

Regards,
Ivan Zhekov
Telerik

[Bill O'Neil]

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?

[Ivan Zhekov]

Bill,

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?

Regards,
Ivan Zhekov
Telerik

[Bill O'Neil]

Glad to hear about SP1 - but I'm still a bit confused.

You say:

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.)

[Ivan Zhekov]

Thank you for reporting that bit about the grid.

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)

Regards,
Ivan Zhekov
Telerik

[Bill O'Neil]

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.)

Bill

[Ivan Zhekov]

Bill,

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.

Regards,
Ivan Zhekov
Telerik

[Bill O'Neil]

I look forward to it.  Can we expect this to be in a public release by SP1?  Or farther out?

[Ivan Zhekov]

Yes, the changes will be included in the SP and the official release that follows.

However, if you would like to see the changes earlier, you can do so by downloading the next internal build, due out next Tuesday.

Regards,
Ivan Zhekov
Telerik

[Bill O'Neil]

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.

[Galin]

Hi Bill,

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.

Regards,
Galin
Telerik

[Manu]

hi Ivan,

any updates? so with 2019 SP1 what will be the best practice to change the Bootstrap skin control size?

[Rumen]

Hi,

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 

<style>
body  {
    font-size: 9px;
}
</style>

or the controls' specific classes:

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Namespace="Telerik.Web.UI.Debug" TagPrefix="debug" %>

<!DOCTYPE html>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
           <style>
           .RadDropDownList, button.RadButton , .RadInput  {
               font-size: 30px;
           }
            </style>
</head>

<body>

    <form id="form1" runat="server">

       <asp:ScriptManager runat="server" />

        <telerik:RadDropdownList Skin="Bootstrap" RenderMode="Lightweight" ID="RadDropdownList1" runat="server">
            <Items>
                <telerik:DropDownListItem Text="Item1" />
            </Items>
        </telerik:RadDropdownList>
        <telerik:RadButton Skin="Bootstrap" RenderMode="Lightweight" ID="RadButton1" Text="Submit"  runat="server"></telerik:RadButton>
        <telerik:RadTextBox Skin="Bootstrap" RenderMode="Lightweight" ID="RadTextBox1" Text="Some Content"  runat="server"></telerik:RadTextBox>
    </form>
</body>
</html>

Regards,
Rumen
Progress Telerik