We are having problems with the RadWindow on iPhone. First
is if we use RadAsyncUpload on the page the
popup window/RadWindow it loses its responsiveness. We use bootstrap, I've attached screenshot of how it looks like. The controls overflows on the right.
Next is within the Radwindow we have a panel which is visible=false
by default and is ajaxified to show when a checkbox is ticked. When those panels
are shown, it won’t let you click on the button. Meaning whenever you click on
the button the page jumps up and focuses on the other fields above it. And sometimes it wont let you scroll up or down within the RadWindow
Below is the html code. How can we get around this issue?
<telerik:RadAjaxLoadingPanel ID="loadingInjured" runat="server"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="ajxInjured" runat="server" LoadingPanelID="loadingInjured">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>What was damaged?</label>
<p>
Select equipment that was damaged.
</p>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel2">
<telerik:RadComboBox ID="ddEquipment" runat="server" DataSourceID="SqlAssets" DataTextField="OrganisationName" DataValueField="OUID" Width="100%" Filter="Contains">
<DefaultItem Text=" - select - " Value="" />
</telerik:RadComboBox>
<asp:SqlDataSource ID="SqlEquionentInvolved" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" SelectCommand="SELECT ListID, ItemName FROM [_FFList] WHERE (([TenantID] = @TenantID) AND ItemTypeID = 87) ORDER BY ItemName">
<SelectParameters>
<asp:SessionParameter DefaultValue="0" Name="TenantID" SessionField="TenantID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlAssets" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" SelectCommandType="StoredProcedure"
SelectCommand="_FFLocationSelectAssets">
<SelectParameters>
<asp:SessionParameter Name="TenantID" SessionField="TenantID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</telerik:RadAjaxPanel>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label style="width:100%"> </label>
<p>
or input what was damaged.
</p>
<asp:TextBox ID="txtOtherDamage" runat="server" Width="100%" CssClass="form-control" placeholder="others"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>Property Damage Type</label>
<telerik:RadComboBox ID="ddPropertyType" Width="100%" runat="server" required="" MarkFirstMatch="true" AllowCustomText="false" DataSourceID="SqlPropertyDamage" DataTextField="ItemName" DataValueField="ListID">
<DefaultItem Text="Select an option..." Value="0" />
</telerik:RadComboBox>
<asp:SqlDataSource ID="SqlPropertyDamage" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" SelectCommand="SELECT ListID, ItemName FROM [_FFList] WHERE (([TenantID] = @TenantID) AND ItemTypeID = 124) ORDER BY ItemName">
<SelectParameters>
<asp:SessionParameter DefaultValue="0" Name="TenantID" SessionField="TenantID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>Cost</label>
<asp:TextBox ID="txtCost" runat="server" TextMode="Number" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Description</label>
<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Rows="4" Width="100%" CssClass="form-control" MaxLength="500"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<asp:CheckBox ID="chkIsInsurance" runat="server" Text=" Insurance?" AutoPostBack="true" OnCheckedChanged="chkIsInsurance_OnCheckedChanged" />
</div>
</div>
</div>
<asp:Panel ID="pnlInsurance" runat="server" Visible="false">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Company Insurer Name</label>
<asp:TextBox ID="txtInsuranceName" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Company Insurance Claim Number</label>
<asp:TextBox ID="txtInsuranceClaimNumber" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>3rd Party Insurer Name</label>
<asp:TextBox ID="txtThirdPartyInsurerName" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>3rd Party Insurance Claim Number</label>
<asp:TextBox ID="txtThirdInsurerClaimNumber" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<asp:CheckBox ID="chkIsRecoverable" runat="server" Text=" Recoverable?" AutoPostBack="true" OnCheckedChanged="chkIsRecoverable_OnCheckedChanged"/>
</div>
</div>
<asp:Panel ID="pnlRecoverableAmount" runat="server" Visible="false">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Recoverable Amount</label>
<asp:TextBox ID="txtRecoverableAmount" runat="server" TextMode="Number" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
</asp:Panel>
</div>
</asp:Panel>
<div class="row">
<hr />
<div id="pnlDropZone">
<asp:Panel ID="pnlFiles" runat="server">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Files</label>
<div class="dropzone" onclick="OpenUploadDialogPopup();">
<div class="dz-default dz-message" style="margin: 2em 0;text-align:center;">
<span>
<strong>Drop files here or click to upload. </strong>
</span>
</div>
</div>
<telerik:RadAsyncUpload ID="uplFiles" runat="server" MultipleFileSelection="Automatic" DropZones=".dropzone" HideFileInput="true" CssClass="radasyncAttachment"></telerik:RadAsyncUpload>
</div>
</div>
</asp:Panel>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="simpleUpload" style="display:none;">
<div class="form-group">
<label>Files</label>
<telerik:RadAsyncUpload ID="btnUploadSimple" runat="server" MultipleFileSelection="Automatic"></telerik:RadAsyncUpload>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<uc1:uFiles runat="server" ID="uFiles" />
</div>
</div>
<asp:Panel runat="server" ID="pnlError" Visible="false">
<div class="alert alert-danger">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<asp:Literal ID="lblError" runat="server"></asp:Literal>
</div>
</asp:Panel>
<div class="row" id="pnlSave">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-success btn-block" OnClick="btnSave_Click"/>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn btn-default btn-block" OnClick="btnCancel_Click"/>
</div>
</div>
<div class="row"><!-- need the spaces below for ios safari, the panel disapears when no spaces below not sure why -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</telerik:RadAjaxPanel>
to open the radwindow, we use this code to resize the window, so it will be responsive:
function SetWindowWidth() {
var winWidth = $(window).width();
if (winWidth < 900) {
console.log("Window width: " + $(window).width());
var radWindowId = '<%=RadWindowAddPropertyDamage.ClientID%>';
$find(radWindowId).set_maxWidth(winWidth - 50);
}
$find(radWindowId).show();
}
1 Answer, 1 is accepted
Thank you for providing the markup for your page. There are a couple of items that could be causing this issue and they are below.
First Item
The client-side code for displaying your RadWindow explicitly sets the width and as a result constrains the responsiveness. Try removing the explicit size and use the maximize method as show in the below code sample. Please review the RadWindow Responsive, Adaptive and Elastic Capabilities for more information.
function DeviceCheck(){ // checks if touch-enabled device and if width is less than 900 return Telerik.Web.BroserFeatures.touchEvents && $telerik.$(window).width() < 900;}function OnClientShow(sender,args) { if(DeviceCheck()){ /* sets up behaviors and leaves only the close button */ sender.set_behaviors(Telerik.Web.UI.WindowBehaviors.Close); sender.set_visibileStatusBar(false); // maximize so it takes up the entire viewport and reacts to size changes sender.maximize(); }}Second Item
The meta viewport tag in the head section of the page. I am sure this is already known but libraries like Bootstrap have built-in support for mobile responsiveness. By ensuring this tag is present should help this.
<meta name="viewport" content="width=device-width,initial-scale=1">I hope this helps and please post a reply if you have any additional questions. Thank you for using the Telerik Forums.
Regards,
Eric
Progress Telerik