Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 02 Nov 2020 15:50 by ADMIN
Release R1 2021
miksh
Created on: 02 Nov 2020 08:13
Category: Window
Type: Bug Report
0
Window titlebar gets flatten in Bootstrap

When using Telerik controls with Bootstrap theme and Bootstrap 3.x the radWindow title has cosmetic issue (see attached).

It appeared that Bootstrap global box-sizing: border-box is the reason. 

Repro markup:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />

        <telerik:RadWindow Skin="Bootstrap" ID="RadWindow1" runat="server" Title="Some RadWindow title" VisibleOnPageLoad="true" RenderMode="Lightweight">
            <ContentTemplate>adadsa</ContentTemplate>
        </telerik:RadWindow>
    </form>
</body>
</html>

Bootstrap skin 

Silk skin

The workaround is to set box-sizing: content-box in rwTitleWrapper:

<style>
.rwTitleWrapper 
{
       box-sizing: content-box !important;
}
</style>

 

1 comment
ADMIN
Rumen
Posted on: 02 Nov 2020 08:22

Hi everyone,

We will fix this issue with priority for R1 2021. 

The provided workaround is applicable for the old versions too:

<style>
.rwTitleWrapper 
{
       box-sizing: content-box !important;
}
</style>

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

Create an account Log In
View
Type
Status
Category