What is the proper way to make a window 'responsive'. We are revamping our application to use the RadPageLayout on all our pages and that has been going well thus far. The only issue is the RadWindows we use for our 'popups'. When I use the same technique as for our main pages the boxes in the rad window are all about 2 pixels wide. What is the proper way to accomplish things so the popup will be size appropriate as well?
Thanks!!
18 Answers, 1 is accepted
Hello Stephanie,
RadWindow does not affect the content and you can define any CSS rules you like in it.
- When using the ContentTemplate, you will have to write your own CSS
- When using an entire content page, you can use RadPageLayout in it
In either case, I would suggest you review and comment on the following idea: http://feedback.telerik.com/Project/108/Feedback/Details/143807-adaptive-radwindow. My first comment shows a basic example of how you can make a RadWindow adaptive based on the screen size (in this case, just maximize it, but you can also use set_behaviors() according to your preferences). When the RadWindow is maximized, your CSS rules can make more accurate use of the available real estate (max/min-width rules in the @media query).
Regards,
Telerik
Rank 1
Sorry for the long delay I have been working on a million other projects as well...
Okay so what is the 'proper' way to make a RadWindow responsive then? If I use the PageLayout and do not have a size on the RadWindow then everything shows as attached. If I put in a width. Then what width do I use to make sure it fits properly like all the other pages regardless of the screensize/device they are using?
Hi Stephanie,
There is no silver bullet and this should be implemented according to the concrete scenario and needs.
From the screenshot, it seems that RadPageLayout is used in the content and RadWindow has AutoSize=true, which is an invalid scenario: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/autosizing-issues#content-dimensions.
This means you have two options:
- either provide a size to the RadWindow by one of the following options:
- maximize it: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/events/onclientshow.
- set a static width/height
- resize it with the browser as shown in the feedback portal item or in this KB: http://www.telerik.com/support/kb/aspnet-ajax/window/details/setting-size-in-percent-for-the-radwindow)
In such a case you should add responsive design CSS to the content page in the RadWindow so it will use the available real estate. You can do this in many ways, e.g.:- use Bootstrap
- use RadPageLayout. Here is a demo that uses a RadWindow whose size you can change with RadPageLayout inside: http://demos.telerik.com/aspnet-ajax/page-layout/overview/defaultcs.aspx.
- write your own CSS @media queries
- OR provide a static size to the content so AutoSize can work.
Note that this is not about a RadWindow being responsive anymore, but about its content being responsive. RadWindow does not control or change its content and it is up to the developer to create the desired layout. Thus, you may also find interesting the following topic that can help get you started with responsive design: http://docs.telerik.com/devtools/aspnet-ajax/mobile-support/mobile-support-and-responsiveness.
Regards,
Marin BratanovTelerik
Rank 1
Thank you for all that info, but I guess I am still confused....
I just need a way to have the RadWindow and it contents show appropriately sized based on the size of the screen, device, browser. I have tried a few of these ideas but I cannot get things to work the way I want.
I basically want a popup (RadWindow) to be centered and set a max width for it on larger screens so it does not take up the entire window. If on a smaller screen obviously the window should not be as wide. Since i am using the RadPageLayout for the content in the RadWindow the content then should size appropriately correct?
So, what is the best way to appropriately do that. I am playing around with the Javacript that opens the RadWindows in our application.
function openRadWindow(url, name, w, h) {
if (w > document.documentElement.offsetHeight)
w = document.documentElement.offsetHeight;
var left = (screen.width / 2) - (w / 2);
var top = (screen.height / 2) - (h / 2);
var oWnd = radopen(url, name, w, h, left, top);
oWnd.setSize(w, h);
oWnd.center();
}
Hello Stephanie,
Such a JS approach is the correct way to set dimensions according to the browser viewport. You may want to add more conditions and checks to accommodate different scenarios.
As for the RadWindow contents - RadPageLayout is the easiest option but it is applicable only if you load an entire content page in the RadWindow.
Regards,
Telerik
Rank 1
Thanks. This seems to be working fairly for us. One other question....
Is there a way to have things auto-size vertically but not horizontally? We want to have the ability to open the radwindow used for the popup using this JavaScript approach, but then there is a ton of white space below the fields which looks bad.
Hi Stephanie,
You can use the AutoSizeBehaviors property and set it to HeightProportional. Here is a basic example that showcases how this feature works. Play around with the values and see the different results:
<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" AutoSize="true" AutoSizeBehaviors="HeightProportional"> <ContentTemplate> <div style="width: 600px; height: 600px; background: yellow;"></div> </ContentTemplate></telerik:RadWindow>compared to
<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" AutoSize="true" AutoSizeBehaviors="Height">or to
<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" AutoSize="true" AutoSizeBehaviors="Default">note that you must be careful when using both the AutoSize feature and the setSize method together, because you may end up again in the self-contradicting scenario where the RadWindow's size should determine its contents layout (setSize is called) but the RadWindow should resize according to its contents (AutoSize==true). Also, when resizing such a RadWindow, you may find useful the AutoSizeEnd event.
Regards,
Telerik
Rank 1
Thanks. I will definitely look into that. Now my new issue is the actual page layout itself.... I have been building all our new pages and when minimizing the browser to mimic the small, medium, large, etc things look great BUT now that I have released things to be tested and have checked on my phone they are not 'responsive' like I would expect.
I would expect things to be much bigger and not so small. That was the entire point of this project...UGH...
Hi Stephanie,
You should look into using @media queries to increase the font-size for small resolutions so you can take advantage of the elastic capabilities our controls offer: http://docs.telerik.com/devtools/aspnet-ajax/mobile-support/responsive,-adaptive-and-elastic-capabilities.
As for the grid, you should look into using its Mobile RenderMode: http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/render-modes.
Regards,
Telerik
Rank 1
Thanks but I am not using a RadGrid.
Like I mentioned everything works/looks fine on the pc browsers, android phone/tablet, but the medium on the iPad mini is NOT displaying correctly. Can I send a screenshot?
Hi Stephanie,
You can send a screenshot, but it is not likely to be of much help. It is usually the code that leads to the problem that helps in the resolution.
What I can suggest is that you review the pixels this iPad provides so you can see in which category it falls into and adjust the grid settings of the RadPageLayout accordingly.
The following article shows how you can use RadDeviceDetectionFramework to get the screen size it calculates and to apply some custom logic: http://docs.telerik.com/devtools/aspnet-ajax/controls/raddevicedetectionframework.
Regards,
Marin BratanovTelerik
Rank 1
You should compare the ones that work as expected to the ones that don't in terms of:
- server properties and client-side configuration
- render mode
- content - HTML validation, dimensions being provided, CSS applied to the content
Regards,
Telerik
Rank 1
Thanks for that. I have pretty much checked everything.....
For example here is one that does not resize the height:
RadWindow:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="true" HtmlTag="None">
<telerik:LayoutRow RowType="Container">
<Rows>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="12">
<asp:ValidationSummary runat="server" ID="vldSum" CssClass="err" DisplayMode="BulletList" ShowMessageBox="true" ShowSummary="false" ValidationGroup="NewFamilyMember" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
Client:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="11" SpanSm="10" SpanXs="12">
<asp:TextBox runat="server" ID="txtClient" MaxLength="250" Width="100%" TabIndex="-1" Enabled="false" />
<asp:Literal runat="server" ID="litClient" Visible="false" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
Name: <asp:RequiredFieldValidator runat="server" ID="reqName" ControlToValidate="txtName" Text="*" ErrorMessage="Enter Name" Display="None" ValidationGroup="NewFamilyMember" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="5" SpanSm="4" SpanXs="12">
<asp:TextBox runat="server" ID="txtName" CssClass="req" MaxLength="45" Width="100%" TabIndex="2" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
Type: <asp:RequiredFieldValidator runat="server" ID="reqType" ControlToValidate="ddlType" Text="*" ErrorMessage="Select Type" Display="None" ValidationGroup="NewFamilyMember" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="5" SpanSm="4" SpanXs="12">
<asp:DropDownList runat="server" ID="ddlType" CssClass="req" Width="100%" TabIndex="3" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
Age:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="5" SpanSm="4" SpanXs="12">
<asp:TextBox runat="server" ID="txtAge" MaxLength="25" Width="100%" TabIndex="4" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="1" SpanSm="2" SpanXs="12">
Gender: <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="ddlGender" Text="*" ErrorMessage="Select Gender" Display="None" ValidationGroup="NewFamilyMember" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="5" SpanSm="4" SpanXs="12">
<asp:DropDownList runat="server" ID="ddlGender" Width="100%" CssClass="req" TabIndex="5">
<asp:ListItem Text="Male" Value="M" />
<asp:ListItem Text="Female" Value="F" />
</asp:DropDownList>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="12">
<div style="float:right;">
<telerik:RadButton SingleClick="true" SingleClickText="Deleting..." ButtonType="LinkButton" runat="server" ID="btnDelete" Width="90" CssClass="btnN" Visible="false" ToolTip="Delete" Text="Delete" OnClick="btnDelete_Click" TabIndex="7" CausesValidation="false" OnClientClicking="ConfirmDelete" />
<telerik:RadButton SingleClick="true" SingleClickText="Saving..." ButtonType="LinkButton" runat="server" ID="btnSave" Width="90" ToolTip="Save" CssClass="btnY" Text="Save" OnClick="btnSave_Click" TabIndex="6" ValidationGroup="NewFamilyMember" CommandArgument="0" />
</div>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:LayoutRow>
</telerik:RadPageLayout>
</asp:Content>
Opening Code:
lnkFamily.Attributes.Add("onclick", "openRadWindow('" + Constants.DIALOG_FAMILY + "?client=" + c.ID.ToString() + "'); return false;");
RadWindow that does resize:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="true" HtmlTag="None">
<telerik:LayoutRow RowType="Container">
<Rows>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="12">
<asp:ValidationSummary runat="server" ID="vldSum" CssClass="err" DisplayMode="BulletList" ShowMessageBox="true" ShowSummary="false" ValidationGroup="ClientWaiver" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="2">
Client:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="10">
<asp:TextBox runat="server" ID="txtClient" MaxLength="250" Width="100%" TabIndex="-1" Enabled="false" />
<asp:Literal runat="server" ID="litClient" Visible="false" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="2">
Waiver: <asp:RequiredFieldValidator runat="server" ID="reqWaiver" ControlToValidate="ddlWaiver" Text="*" ErrorMessage="Select Waiver" Display="None" ValidationGroup="ClientWaiver" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="4">
<asp:DropDownList runat="server" ID="ddlWaiver" CssClass="req" Width="100%" TabIndex="2" AppendDataBoundItems="true" OnSelectedIndexChanged="ddlWaiver_SelectedIndexChanged" AutoPostBack="true" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2">
Name:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="4">
<asp:TextBox runat="server" ID="txtName" Width="100%" MaxLength="45" TabIndex="3" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="2">
Type:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="4">
<asp:DropDownList runat="server" ID="ddlType" CssClass="req" Width="100%" TabIndex="4">
<asp:ListItem Text="Online" Value="1" />
<asp:ListItem Text="Paper" Value="2" />
<asp:ListItem Text="Other" Value="3" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ID="reqType" ControlToValidate="ddlType" Text="*" ErrorMessage="Choose the waiver type" Display="None" ValidationGroup="ClientWaiver" />
</telerik:LayoutColumn>
</Columns>
<Columns>
<telerik:LayoutColumn Span="2">
Date:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="4">
<asp:TextBox runat="server" ID="txtDate" CssClass="req" MaxLength="25" Width="100%" TabIndex="5" onblur="javascript:formatDate(this);" />
<asp:RangeValidator runat="server" ID="rngDate" ControlToValidate="txtDate" Text="*" ErrorMessage="Enter valid Date" Type="Date" MinimumValue="1900/01/01" MaximumValue="9999/12/31" Display="None" ValidationGroup="ClientWaiver" />
<asp:RequiredFieldValidator runat="server" ID="reqDate" ControlToValidate="txtDate" Display="None" Text="*" ErrorMessage="Enter date the waiver was completed" ValidationGroup="ClientWaiver" />
<ajaxToolkit:CalendarExtender ID="calDate" runat="server" TargetControlID="txtDate" CssClass="calPopup" PopupPosition="TopLeft" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="12">
<div style="float:right;">
<telerik:RadButton SingleClick="true" SingleClickText="Deleting..." ButtonType="LinkButton" runat="server" ID="btnDelete" CssClass="btnN" Visible="false" Width="90" Text="Delete" OnClick="lnbDelete_Click" ToolTip="Delete Client Waiver" CommandArgument='<%#Eval("ID")%>' OnClientClick="ConfirmDelete" />
<telerik:RadButton SingleClick="true" SingleClickText="Saving..." ButtonType="LinkButton" runat="server" ID="btnSave" CssClass="btnY" Width="90" ToolTip="Save" Text="Save" OnClick="btnSave_Click" TabIndex="6" ValidationGroup="ClientWaiver" CommandArgument="0" />
</div>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:LayoutRow>
</telerik:RadPageLayout>
</asp:Content>
Opening Code:
lnkWaiver.Attributes.Add("onclick", "openRadWindow('" + Constants.DIALOG_WAIVER + "?client=" + c.ID.ToString() + "'); return false;");
Both of these are in the EXACT same main page.
Hi Stephanie,
Please do review my previous responses for insights on how to setup dimensions in RadWindow.
The first step would be to fix the dimensions calculations in the openRadWindow function. I am attaching a small sample with comments I built that works fine for me without those calculations that break the dimensions. I suggest you use it as base for your further development.
Once again, do NOT mix AutoSize with responsive design in the content page. They contradict each other. If something works as you want it in such a case, that would be a fluke.
Regards,
Telerik by Progress
Rank 1
Hello Stephanie,
The developer must define the size of the RadWindow in such cases, which brings us back to the start of this thread. My advise is to review the function that calculates the desired dimensions and ensure it works properly. If you set proper dimensions according to the viewport, you will still be able to use responsive CSS in the content.
The other option is to simply maximize the RadWindow so it takes all the available viewport if the viewport is smaller than a certain threshold. This will let you use responsive layout CSS in the content easily.
If you want to use AutoSizing, you must define static dimensions in the content and you cannot use responsive CSS in it. Also, in such a scenario the RadWindow will respond to the content, not to the viewport size (even though it will not go out of the viewport).
I hope this explains the situation.
Regards,
Telerik by Progress
Rank 1