Project with an uneven number of colums

8 posts, 0 answers
  1. Dana Cobb
    Dana Cobb avatar
    46 posts
    Member since:
    Mar 2007

    Posted 11 Aug 2014 Link to this post

    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.
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 14 Aug 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 14 Aug 2014 Link to this post

    Just a quick follow up. You may need to add this to your style sheets after the equal-columns rule:

    .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.

     
  5. Dana Cobb
    Dana Cobb avatar
    46 posts
    Member since:
    Mar 2007

    Posted 14 Aug 2014 in reply to Ivan Zhekov Link to this post

    Ingenious. and so simple!
    Thank you so much!
  6. Dana Cobb
    Dana Cobb avatar
    46 posts
    Member since:
    Mar 2007

    Posted 20 Sep 2014 in reply to Ivan Zhekov Link to this post

    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">
     
    <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>
  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 24 Sep 2014 Link to this post

    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
     

    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.

     
  8. Dana Cobb
    Dana Cobb avatar
    46 posts
    Member since:
    Mar 2007

    Posted 24 Sep 2014 in reply to Ivan Zhekov Link to this post

    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

  9. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 29 Sep 2014 Link to this post

    Dana.

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017