<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabInputs.aspx.cs" Inherits="TabInputs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script>
function OnClientTabSelected(sender, eventArgs) {
var tab = eventArgs.get_tab();
var htmlShow = document.getElementById("divProgressBar");
htmlShow.style.display = "block";
}
function OnClientMouseOut(sender, eventArgs) {
var tab = eventArgs.get_tab();
var htmlShow = document.getElementById("divProgressBar");
htmlShow.style.display = "none";
}
</script>
<div>
<telerik:RadTabStrip ID="RadTabStrip1" RenderMode="Auto" runat="server"
OnClientTabSelected="OnClientTabSelected"
OnClientMouseOut="OnClientMouseOut"
MultiPageID="RadMultiPage1" Skin="MetroTouch">
</telerik:RadTabStrip>
<telerik:RadProgressManager runat="server" ID="rpm" />
<div id="divProgressBar" runat="server" style="display: none; position: absolute; top: 180px; z-index: -1;">
<telerik:RadProgressBar RenderMode="Auto" runat="server" ID="RadProgressBar4"
Indeterminate="true">
</telerik:RadProgressBar>
</div>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
</telerik:RadMultiPage>
</div>
</form>
</body>
</html>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script>
function OnClientTabSelected(sender, eventArgs) {
var tab = eventArgs.get_tab();
var htmlShow = document.getElementById("divProgressBar");
htmlShow.style.display = "block";
}
function OnClientMouseOut(sender, eventArgs) {
var tab = eventArgs.get_tab();
var htmlShow = document.getElementById("divProgressBar");
htmlShow.style.display = "none";
}
</script>
<div>
<telerik:RadTabStrip ID="RadTabStrip1" RenderMode="Auto" runat="server"
OnClientTabSelected="OnClientTabSelected"
OnClientMouseOut="OnClientMouseOut"
MultiPageID="RadMultiPage1" Skin="MetroTouch">
</telerik:RadTabStrip>
<telerik:RadProgressManager runat="server" ID="rpm" />
<div id="divProgressBar" runat="server" style="display: none; position: absolute; top: 180px; z-index: -1;">
<telerik:RadProgressBar RenderMode="Auto" runat="server" ID="RadProgressBar4"
Indeterminate="true">
</telerik:RadProgressBar>
</div>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
</telerik:RadMultiPage>
</div>
</form>
</body>
</html>
Can you try to reproduce the issue with the latest version R1 2023 SP2 (2023.1.323) and RenderMode="Lightweight"? This works on my side within the Google Chrome emulator.
Also you can remove RadProgressManager since it is required by RadProgressArea, but you are using RadProgressBar. You can check the differences at RadProgressBar vs. RadProgressArea Comparison.