I have a project (that is already well underway) that i thought could benefit from the pagelayout control. I began to rough-up a test page with the pagelayout control that i could import in my existing code into, if the pagelayout control seemed to work well.
I encountered an issue right away. The existing page splits the whole screen into 5 columns. One for each week day. How can i divide the columns up when there are a total of 12 columns in the pagelayout that would need to divide into 5 distinct columns? I looked at a couple frameworks like Bootstrap and Gumby for solutiions to "odd number" column layouts, but most of the solutions seemed to be some pretty messy hacks. My vision would be for the days to stack upon each other on a mobile device and beside each other on ipad and above resolutioins. I have written some responsive design solutions with media queries, but their maintainability has always seemed half-baked. I was hoping for this solution to be relatively plug and play, because god knows there is enough complexity within the application itself. Adding another layer of complexity (i.e. a new framework like radpagelayout) makes no sense at this time, so i was hoping you or someone else in the community might have experience with such a modification.
I encountered an issue right away. The existing page splits the whole screen into 5 columns. One for each week day. How can i divide the columns up when there are a total of 12 columns in the pagelayout that would need to divide into 5 distinct columns? I looked at a couple frameworks like Bootstrap and Gumby for solutiions to "odd number" column layouts, but most of the solutions seemed to be some pretty messy hacks. My vision would be for the days to stack upon each other on a mobile device and beside each other on ipad and above resolutioins. I have written some responsive design solutions with media queries, but their maintainability has always seemed half-baked. I was hoping for this solution to be relatively plug and play, because god knows there is enough complexity within the application itself. Adding another layer of complexity (i.e. a new framework like radpagelayout) makes no sense at this time, so i was hoping you or someone else in the community might have experience with such a modification.
7 Answers, 1 is accepted
0
Hello, Dana.
That's something we've been thinking to introduce, but we are not sure how to call it...
Anyway, it's a fairly easy thing to do: a bit of css trickery and voila. I am attaching the solution. Take a look at the rows with class name equal-columns. That's all it takes.
Regards,
Ivan Zhekov
Telerik
That's something we've been thinking to introduce, but we are not sure how to call it...
Anyway, it's a fairly easy thing to do: a bit of css trickery and voila. I am attaching the solution. Take a look at the rows with class name equal-columns. That's all it takes.
Regards,
Ivan Zhekov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Just a quick follow up. You may need to add this to your style sheets after the equal-columns rule:
Regards,
Ivan Zhekov
Telerik
.equal-columns:after { display: none !important;}Regards,
Ivan Zhekov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Dana Cobb
Top achievements
Rank 1
Iron
Rank 1
Iron
answered on 15 Aug 2014, 01:23 AM
Ingenious. and so simple!
Thank you so much!
Thank you so much!
0
Dana Cobb
Top achievements
Rank 1
Iron
Rank 1
Iron
answered on 21 Sep 2014, 03:13 AM
I have the page displaying 5 equal columns, works great! But.... now the columns do not seem to react responsively to shrinking the browser window... Would any of that custom css, break the ability to stack the columns in a low resolution device. Here is my .aspx page:
​
​
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" /> <title></title> <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> <style type="text/css"> body{margin-top: 0px;} html .t-container-fluid, html .t-row-wrap > .t-row { max-width: none; } /* begin styles from telerik admin */ .equal-columns { width: 100%; display: table; table-layout: fixed; } .equal-columns > .t-col { width: auto; float: none; display: table-cell; } .equal-columns:after {display: none !important;} /*.card { padding: 10px; background: white; border: 1px solid #cccccc; }*/ .card { /*padding: 10px;*/ text-align:center; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; color: White; background: white; background-image: url(images/bg_00.gif); background-repeat: repeat-x; border: 1px solid #cccccc; } /* end styles from telerik admin */ .day{background-color: yellow; padding: 10px; width: 20%;} .end{width: 0%} .row{ background-color: #000000; width: 100%;} .t-row{background-color: red;} .main{width: 100%;} .headerbutton{width: 100%; font-weight: bold;} </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <script type="text/javascript"> //Put your JavaScript code here. </script> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <telerik:RadPageLayout ID="RadPageLayout1" runat="server" EnableAjaxSkinRendering="False" EnableEmbeddedBaseStylesheet="True" EnableEmbeddedScripts="False" EnableEmbeddedSkins="False" GridType="Fluid" HtmlTag="Div" RegisterWithScriptManager="True" RenderMode="Classic" ShowGrid="False" CssClass="main"> <Rows> <telerik:LayoutRow CssClass="equal-columns"> <Columns> <telerik:LayoutColumn Span="5"><div class="card">Menu</div></telerik:LayoutColumn> </Columns> </telerik:LayoutRow> <telerik:LayoutRow CssClass="equal-columns row" ID="Week1" runat="server" AccessKey="" HiddenLg="False" HiddenMd="False" HiddenSm="False" HiddenXl="False" HiddenXs="False" HtmlTag="Div" Owner="RadPageLayout1" RowType="Row" ToolTip="" WrapperHtmlTag="None"> <Columns> <%--<telerik:LayoutColumn SpanMd="1" SpanSm="1" SpanXs="5" CssClass="end" Visible="True">Left Side</telerik:LayoutColumn>--%> <telerik:CompositeLayoutColumn Span="1" SpanXl = "1" SpanLg="1" SpanXl = "1" SpanLg="1" SpanMd="1" SpanSm="1" SpanXs="5" CssClass="day"> <Rows> <telerik:LayoutRow> <Content><asp:Button ID="cmd_01_01" CssClass="headerbutton" runat="server" Text="Day1 - mm/dd" ToolTip="click here to view the whole day" /></Content> </telerik:LayoutRow> <telerik:LayoutRow> <Content>Installations</Content> </telerik:LayoutRow> </Rows> </telerik:CompositeLayoutColumn> <telerik:CompositeLayoutColumn Span="1" SpanXl = "1" SpanLg="1" SpanMd="1" SpanSm="1" SpanXs="5" CssClass="day"> <Rows> <telerik:LayoutRow> <Content><asp:Button ID="cmd_01_02" CssClass="headerbutton" runat="server" Text="Day1 - mm/dd" ToolTip="click here to view the whole day" /></Content> </telerik:LayoutRow> <telerik:LayoutRow> <Content>Installations</Content> </telerik:LayoutRow> </Rows> </telerik:CompositeLayoutColumn> <telerik:CompositeLayoutColumn Span="1" SpanXl = "1" SpanLg="1" SpanMd="1" SpanSm="1" SpanXs="5" CssClass="day"> <Rows> <telerik:LayoutRow> <Content><asp:Button ID="cmd_01_03" CssClass="headerbutton" runat="server" Text="Day1 - mm/dd" ToolTip="click here to view the whole day" /></Content> </telerik:LayoutRow> <telerik:LayoutRow> <Content>Installations</Content> </telerik:LayoutRow> </Rows> </telerik:CompositeLayoutColumn> <telerik:CompositeLayoutColumn Span="1" SpanXl = "1" SpanLg="1" SpanMd="1" SpanSm="1" SpanXs="5" CssClass="day"> <Rows> <telerik:LayoutRow> <Content><asp:Button ID="cmd_01_04" CssClass="headerbutton" runat="server" Text="Day1 - mm/dd" ToolTip="click here to view the whole day" /></Content> </telerik:LayoutRow> <telerik:LayoutRow> <Content>Installations</Content> </telerik:LayoutRow> </Rows> </telerik:CompositeLayoutColumn> <telerik:CompositeLayoutColumn Span="1" SpanXl = "1" SpanLg="1" SpanMd="1" SpanSm="1" SpanXs="5" CssClass="day"> <Rows> <telerik:LayoutRow> <Content><asp:Button ID="cmd_01_05" CssClass="headerbutton" runat="server" Text="Day1 - mm/dd" ToolTip="click here to view the whole day" /></Content> </telerik:LayoutRow> <telerik:LayoutRow> <Content>Installations</Content> </telerik:LayoutRow> </Rows> </telerik:CompositeLayoutColumn> <%--<telerik:LayoutColumn Span="1" SpanXl = "1" SpanLg="1" CssClass="end" Visible="True">Right Side</telerik:LayoutColumn>--%> </Columns> </telerik:LayoutRow> <telerik:LayoutRow CssClass="equal-columns row" ID="Week2" runat="server" AccessKey="" HiddenLg="False" HiddenMd="False" HiddenSm="False" HiddenXl="False" HiddenXs="False" HtmlTag="Div" Owner="RadPageLayout1" RowType="Row" ToolTip="" WrapperHtmlTag="None"> </telerik:LayoutRow> </Rows> </telerik:RadPageLayout> </form> </body></html>0
Hello, Dana.
Which breakpoint would you lite to trigger the default behaviour of columns? Also, which browsers do you need to support?
Regards,
Ivan Zhekov
Telerik
Which breakpoint would you lite to trigger the default behaviour of columns? Also, which browsers do you need to support?
Regards,
Ivan Zhekov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Dana Cobb
Top achievements
Rank 1
Iron
Rank 1
Iron
answered on 24 Sep 2014, 05:24 PM
well ideally i would like all the breakpoints to work in the big "3" browsers (IE, Chrome, and Firefox). If i had to choose I would say SpanMd, SpanSm, and SpanXs.
Oh and it's probably not proper forum behavior, but if you could answer my other pending question in this forum... "How can I detect which Span setting is being used?". I will be eternally grateful. I have a whole bunch of ideas all hinging on that answer. :-)
Thanks as usual
Oh and it's probably not proper forum behavior, but if you could answer my other pending question in this forum... "How can I detect which Span setting is being used?". I will be eternally grateful. I have a whole bunch of ideas all hinging on that answer. :-)
Thanks as usual
0
Dana.
I need to tweak a few more things before I send you the improved version.
Regards,
Ivan Zhekov
Telerik
I need to tweak a few more things before I send you the improved version.
Regards,
Ivan Zhekov
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.