Hi, I'm having trouble with a control called RadWindow. I show that control inside a normal asp form. The radwindow has a ContentTemplate inside it, and inside that content template I have all the controls of the form. What happens is that when the window is maximized then when you click on a datepicker or a comobox (both from telerik) the drop-down list of the combobox is not displayed nor the calendar of the radCalendar, which could be?
CODE:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="frmPruebaApariencia.aspx.vb" Inherits="frmPruebaApariencia" %><%@ Register Src="~/Controles/CtrUpload.ascx" TagPrefix="uc1" TagName="CtrUpload" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba de consulta de trazabilidad</title>
<style>
.RadCalendar_Material .rcSelected2 a {
background-color: #ffd587;
color: orange;
}
.shadowed-div-header {
background-color: #f1f1f1;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
}
.shadowed-div-body {
background-color: #f1f1f1;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
width:auto;
}
</style>
<link href="../css/Mensaje.css" rel="stylesheet" />
<script src="../script/maestro.js"></script>
<script src="../script/jquery-1.4.1.js"></script>
<script src="../script/jquery-1.4.1.min.js"></script>
<script src="../script/mensaje.js"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
<link href="../css/fonts.css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
function preventBack() { window.history.forward(); }
setTimeout("preventBack()", 0);
window.onunload = function () { null };
function button_click(objTextBox, objBtnID) {
if (window.event.keyCode == 13) {
document.getElementById(objBtnID).focus();
document.getElementById(objBtnID).click();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager" runat="server" EnableTheming="True" LoadScriptsBeforeUI="False">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
</Scripts>
</asp:ScriptManager>
<telerik:RadAjaxManager ID="AjaxManager" runat="server" ClientIDMode="Static" EnableTheming="True" LoadScriptsBeforeUI="False">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="AjaxManager">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadAsyncUpload1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<script type="text/javascript">
function callBackFn(arg) {
return true;
}
function ChangeToUpperCase(sender, args) {
var inputElement = sender.get_inputDomElement();
inputElement.style.textTransform = "uppercase";
}
</script>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="True" Skin="Material" Visible="true" />
<telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" DecoratedControls="all" DecorationZoneID="decorationZone"></telerik:RadFormDecorator>
<telerik:RadWindowManager ID="Alerta" runat="server" EnableShadow="True" CssClass="radalert" Behaviors=" Close, Move, Resize, Maximize, Minimize, Reload, Pin">
</telerik:RadWindowManager>
<telerik:RadWindow RenderMode="Lightweight" ID="RadWindow1" Title="Prueba" AutoSize="false" VisibleOnPageLoad="true"
runat="server">
<ContentTemplate>
<asp:UpdatePanel ID="upPrincipal" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLimpiarFiltros" />
</Triggers>
<ContentTemplate>
<div id="decorationZone">
<div style="margin: 20px;">
<div id="Header1" class="shadowed-div-header" style="border-radius: 10px; background-color: #A9B586; padding: 15px; display:none;">
<div style="color: white; font-size: 20px">Prueba de Apariencia</div>
</div>
<div class="shadowed-div-body" style="margin-top: 20px; border-radius: 10px; background-color: white; width: auto">
<div id="divFiltros" style="padding: 10px;">
<div runat="server" id="divConsulta" visible="true">
<div style="margin-top: 5px"></div>
<div>
<asp:Button ID="btnBuscar" Text="Buscar" runat="server" />
<asp:Button ID="btnLimpiarFiltros" Text="Limpiar filtros" runat="server" />
</div>
<div style="border: none; border-top: 1px solid #CFD8DC; margin-top: 10px; margin-bottom: 10px; margin-left: -10px; margin-right: -10px;"></div>
<div class="row p-1">
<div class="col-12 col-md-2 pr-0" style="font-weight: bold">Filtros</div>
</div>
<div class="row p-1">
<div class="col-12 col-md-2">Rango Requerimiento Desde</div>
<div class="col-12 col-md-4">
<telerik:RadTextBox runat="server" ID="txtRangoRequerimientoDesde" Text="0" InputType="Number" Width="80px" TabIndex="1" RenderMode="Lightweight"></telerik:RadTextBox>
</div>
<div class="col-12 col-md-2">Rango Requerimiento Hasta</div>
<div class="col-12 col-md-4">
<telerik:RadTextBox runat="server" ID="txtRangoRequerimientohasta" Text="0" InputType="Number" Width="80px" TabIndex="2" RenderMode="Lightweight"></telerik:RadTextBox>
</div>
</div>
<div class="row p-1" runat="server" id="divFecha" visible="true">
<div class="col-12 col-md-2">Fecha Registro Desde</div>
<div class="col-12 col-md-4">
<telerik:RadDatePicker ID="dtpFechaDesde" runat="server" Width="150px" ZIndex="10000" Culture="es-DO" TabIndex="1" ToolTip="" DatePopupButton-BackColor="#A9B586" DatePopupButton-ForeColor="black" Calendar-SelectedDayStyle-CssClass="rcSelected2" RenderMode="Lightweight">
<DateInput ID="DateInput1" runat="server" DateFormat="dd/MM/yyyy" ReadOnly="true"></DateInput>
</telerik:RadDatePicker>
</div>
<div class="col-12 col-md-2">Fecha Registro Hasta</div>
<div class="col-12 col-md-4">
<telerik:RadDatePicker ID="dtpFechaHasta" runat="server" Width="150px" ZIndex="10000" Culture="es-DO" TabIndex="2" DatePopupButton-BackColor="#A9B586" DatePopupButton-ForeColor="black" Calendar-SelectedDayStyle-CssClass="rcSelected2" RenderMode="Lightweight">
<DateInput ID="DateInput2" runat="server" DateFormat="dd/MM/yyyy" ReadOnly="false"></DateInput>
</telerik:RadDatePicker>
</div>
</div>
<div class="row p-1" runat="server" id="divEmpleado" visible="true">
<div class="col-12 col-md-2 pr-0">Empleado</div>
<div class="col-12 col-md-4">
<telerik:RadComboBox ID="cmbEmpleado" runat="server" Width="100%" ZIndex="10000" ClientIDMode="Static" RenderMode="Lightweight"
MaxHeight="200px" TabIndex="3" AllowCustomText="True" Sort="Ascending"
MarkFirstMatch="true" OnClientKeyPressing="ChangeToUpperCase"
Filter="Contains" DataValueField="Codigo" DataTextField="Nombre" CssClass="combo-full" AppendDataBoundItems="true">
<Items>
<telerik:RadComboBoxItem Text="Todos los empleados" Value="0" Selected="true" />
</Items>
</telerik:RadComboBox>
</div>
<div class="col-12 col-md-2 pr-0">Posición</div>
<div class="col-12 col-md-4">
<telerik:RadComboBox ID="cmbPosicion" runat="server" Width="100%" ZIndex="10000" ClientIDMode="Static" RenderMode="Lightweight"
MaxHeight="200px" TabIndex="4" AllowCustomText="True" Sort="Ascending"
MarkFirstMatch="true" OnClientKeyPressing="ChangeToUpperCase"
Filter="Contains" DataValueField="Codigo" DataTextField="Nombre" CssClass="combo-full" AppendDataBoundItems="true">
<Items>
<telerik:RadComboBoxItem Text="Todas las posiciones" Value="0" Selected="true" />
</Items>
</telerik:RadComboBox>
</div>
</div>
<div class="row p-1" runat="server" id="div1" visible="true">
<div class="col-12 col-md-2">Estatus</div>
<div class="col-12 col-md-4">
<telerik:RadComboBox ID="cmbEstatusFiltro" runat="server" ZIndex="10000" Width="100%" ClientIDMode="Static" RenderMode="Lightweight"
MaxHeight="200px" TabIndex="6" AllowCustomText="True" Sort="Ascending"
MarkFirstMatch="true" OnClientKeyPressing="ChangeToUpperCase"
Filter="Contains" DataValueField="Codigo" DataTextField="Nombre" CssClass="combo-full" AppendDataBoundItems="true">
<Items>
<telerik:RadComboBoxItem Text="Todos los estatus" Value="0" Selected="true" />
<telerik:RadComboBoxItem Text="En Trámite" Value="1" Selected="true" />
<telerik:RadComboBoxItem Text="Aprobado" Value="2" Selected="true" />
<telerik:RadComboBoxItem Text="Anulado" Value="3" Selected="true" />
<telerik:RadComboBoxItem Text="Cerrado" Value="4" Selected="true" />
</Items>
</telerik:RadComboBox>
</div>
</div>
</div>
<div style="margin-top: 20px;">
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" Culture="es-DO" BorderColor="White" MasterTableView-Width="100%" Width="100%"
AllowPaging="True" AllowAutomaticUpdates="True" AllowAutomaticInserts="False" MasterTableView-PagerStyle-PageSizeLabelText="Páginas"
AllowAutomaticDeletes="True" AllowSorting="true" MasterTableView-PagerStyle-NextPageToolTip="Siguiente" MasterTableView-PagerStyle-LastPageToolTip="Ultima pagina"
MasterTableView-PagerStyle-FirstPageToolTip="Primera página" MasterTableView-PagerStyle-PrevPageToolTip="Atras"
FooterStyle-ForeColor="Black" HeaderStyle-ForeColor="Black" ItemStyle-ForeColor="Black" AlternatingItemStyle-ForeColor="Black" ZIndex="10000">
<PagerStyle Mode="NextPrevAndNumeric" />
<MasterTableView AutoGenerateColumns="False"
DataKeyNames="ID" CommandItemDisplay="None">
<Columns>
<telerik:GridButtonColumn CommandName="Edit" Text="Editar" HeaderText="Editar" HeaderStyle-ForeColor="GrayText">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="ID" HeaderText="ID" HeaderStyle-Width="5%" ItemStyle-Width="5%"
UniqueName="ID" Visible="true" MaxLength="5">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Fecha" HeaderText="Fecha" DataFormatString="{0:dd-MM-yyyy}" HeaderStyle-Width="13%" ItemStyle-Width="13%"
UniqueName="Fecha">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="DiasTranscurridos" HeaderText="DÃas Transcurridos" HeaderStyle-Width="5%" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"
UniqueName="DiasTranscurridos">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Nombre_Solicitante" HeaderText="Nombre Solicitante" HeaderStyle-Width="18%" ItemStyle-Width="15%"
UniqueName="Nombre_Solicitante">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Posicion" HeaderText="Posición" HeaderStyle-Width="15%" ItemStyle-Width="15%"
UniqueName="Posicion">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Cantidad" HeaderText="Cantidad" HeaderStyle-Width="5%" ItemStyle-Width="5%"
UniqueName="Cantidad">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Compania" HeaderText="Compania" HeaderStyle-Width="17%" ItemStyle-Width="17%"
UniqueName="Compania">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Facilidad" HeaderText="Facilidad" HeaderStyle-Width="15%" ItemStyle-Width="15%"
UniqueName="Facilidad">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Estatus" HeaderText="Estatus" HeaderStyle-Width="12%" ItemStyle-Width="12%"
UniqueName="Estatus">
</telerik:GridBoundColumn>
<telerik:GridButtonColumn Text="Eliminar" CommandName="Delete" HeaderText="Eliminar" HeaderStyle-ForeColor="GrayText" />
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
<div style="border: none; border-top: 1px solid #CFD8DC; margin-top: 25px; margin-bottom: 10px; margin-left: -10px; margin-right: -10px;"></div>
<div>
<div style="font-weight: bold">Otros controles</div>
</div>
<div>
<div style="margin-bottom: 10px">
<telerik:RadCheckBox runat="server" ID="checkbox1" Text="Todos los registros" TabIndex="1" RenderMode="Lightweight"></telerik:RadCheckBox>
</div>
<div style="margin-bottom: 10px;">
<telerik:RadRadioButtonList runat="server" ID="rbtnEstatusEmpleado" RepeatDirection="Horizontal" RepeatColumns="5" TabIndex="1" Direction="Horizontal">
<Items>
<telerik:ButtonListItem Value="0" Text="Todos" Selected="True"></telerik:ButtonListItem>
<telerik:ButtonListItem Value="A" Text="Activo" Selected="False"></telerik:ButtonListItem>
<telerik:ButtonListItem Value="B" Text="Inactivo"></telerik:ButtonListItem>
</Items>
</telerik:RadRadioButtonList>
</div>
</div>
<div>
<telerik:RadSlider RenderMode="Lightweight" ID="RadSlider_Items" runat="server" ItemType="item" Width="400px"
Height="70px" AnimationDuration="400" CssClass="ItemsSlider" ThumbsInteractionMode="Free" Style="margin-top: 10px;">
<Items>
<telerik:RadSliderItem Text="Jan" Value="1"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Feb" Value="2"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Mar" Value="3"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Apr" Value="4"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="May" Value="5"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Jun" Value="6"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Jul" Value="7"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Aug" Value="8"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Sep" Value="9"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Oct" Value="10"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Nov" Value="11"></telerik:RadSliderItem>
<telerik:RadSliderItem Text="Dec" Value="12"></telerik:RadSliderItem>
</Items>
</telerik:RadSlider>
<telerik:RadSlider RenderMode="Lightweight" ID="RadSlider_NoItems" runat="server" Height="70px" Width="400px"
AnimationDuration="400" ThumbsInteractionMode="Free" Value="50" Enabled="true">
</telerik:RadSlider>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UPR2" runat="server" AssociatedUpdatePanelID="upPrincipal" DisplayAfter="500">
<ProgressTemplate>
<div class="cont-prog">
<div class="msg-prog">Procesando...</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</telerik:RadWindow>
</form>
</body>
</html>
By default, you should not experience such a problem with the default configuration of the Telerik controls. My test with the latest version does not show problems with your code:
What you can do is to examine the stylesheet of the page for any CSS settings which override the default z-index of the combobox and datepicker dropdowns. For example, start to comment these link tags one by one and test the page:
<link href="../css/Mensaje.css" rel="stylesheet" /> <link href="../css/bootstrap.min.css" rel="stylesheet" /> <link href="../css/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" /> <link href="../css/fonts.css" rel="stylesheet" />