This is a migrated thread and some comments may be shown as answers.

Project with an uneven number of colums

7 Answers 180 Views

PageLayout

This is a migrated thread and some comments may be shown as answers.

Dana Cobb asked on 11 Aug 2014, 02:54 PM

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.

7 Answers, 1 is accepted

answered on 14 Aug 2014, 01:13 PM

848505----uneven-number-of-columns.zip

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

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.

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>