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>
Test Environment:
OS: Windows_11URL: https://demos.telerik.com/aspnet-ajax/window/examples/windowmanager/defaultcs.aspx
Repro Steps:
- Open Telerik Web UI Window RadWindowManager Client-side API Demo | Telerik UI for ASP.NET AJAX.
- Locate "METHODS OPENING RADWIDNOWMANAGER DIALOGS" under "DEMO CONFIGURATOR".
- Under "METHODS OPENING RADWIDNOWMANAGER DIALOGS", open any button (for example, "Open radconfirm").
- Dialog opens.
- Keep pressing TAB inside the dialog.
- Observe the issue that the focus moves to the background content behind the dialog even though the dialog is still open. The focus should remain trapped within the dialog.
Actual Behavior:
Focus comes out of 'delete' popup without closing it automatically.
Expected Behavior:
When opening the 'delete pop-up', focus is expected to move to delete pop-up controls and focus should not leave the pop-up until it is closed. When a pop-up is opened, focus should move into that item and when it is closed, focus should return to the same control that opened it. In addition, focus should be confined to the window until the user closes it with an action, such as the close button or the ‘ESC’ key.