+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / FIxed width column page layout

FIxed width column page layout

9 posts, 1 answered
  1. Euan
    Euan avatar
    18 posts
    Registered:
    14 Oct 2010
    18 Mar 2011
    Link to this post
    How can I create a fixed width column page layout using the layout controls ?

    I want two columns, a left sidebar with a fixed width 250px and a right content column that expands to fill the remaining width.


    Thanks
    Euan
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    23 Mar 2011
    Link to this post
    Hello Euan,

    You can create a custom layout widget with one fixed column and one flexible. Follow the instructions from the screenshot to add the widget. There is a bug that the first time you drop the custom widget you cannot drop content widgets right away. You have to refresh the page first. This bug is logged and will soon be fixed.

    You can use the template from below:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sitefinity" %>
      
    <div runat="server" class="sf_cols">
        <div runat="server" class="sf_colsOut sf_fixed250">
            <div runat="server" class="sf_colsIn sf_2cols_1in">
                  
            </div>
        </div>
        <div runat="server" class="sf_colsOut sf_auto">
            <div runat="server" class="sf_colsIn sf_2cols_2in">
              
            </div>
        </div>
    </div>

    After you have added the widget, add the CSS from below to your theme:
    .sf_fixed250
    {
    float: left; width: 200px; 
    }
    .sf_auto
    {
    float: none; 
    }
    .sf_auto .sf_2cols_2in
    {
    margin: 0 0 0 200px; padding: 0; 
    }

    Thank should do the trick. Let us know if you need further help.


    Kind regards,
    Katia
    the Telerik team
    Answered
  3. AFTR
    AFTR avatar
    22 posts
    Registered:
    05 Oct 2010
    24 Mar 2011
    Link to this post
    One thing I noticed while implementing this.

    If you drag several of these custom layout controls onto a page and then click edit while in layout mode, to say, apply a custom wrapper class, it will modify the percentages of the column widths and override any CSS you have.

    The way I have found around this is to just apply your custom wrapper classes in the controls in Visual Studio, but that is kind of inconvenient because you have to then create a custom layout control for every situation.
  4. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    30 Mar 2011
    Link to this post
    Hello,

    We will think of a way to prevent the width modification when a layout widget is edited. In the meantime, you can override the width with important rules in your theme like shown below.
    .sf_fixed250 
    width: 250px !important;  
    .sf_auto 
    width: auto !important;

    All the best,
    Katia
    the Telerik team
  5. Ernest
    Ernest avatar
    37 posts
    Registered:
    12 Mar 2012
    23 Jan 2013
    Link to this post

    We're having the same kind of problem which involves Responsive Design. We have a three column layout where the width of the left column is wider than the middle and right column. The widths are all specified in the css as 

    .LeftContent { width: 468px !important; float: left; }

    .MiddleContent, .RightContent { 227px !important; float: left; }

    The main problem we're having is that when responsive design is expected to take effect it doesn't work anymore. Also what we've noticed is that when float:left is not included in the css the columns don't line up side-by-side compared to when the layout was initially dragged to the placeholder.

  6. Ernest
    Ernest avatar
    37 posts
    Registered:
    12 Mar 2012
    23 Jan 2013
    Link to this post

    We found a solution a to the Responsive Design issue. These are our css classes:

    .SiteContent .SiteInnerContent .sf_3cols_1_33 { width: 468px; float: left; margin-right: 13px; }
    .SiteContent .SiteInnerContent .sf_3cols_2_34 { width: 227px; float: left; margin-right: 12px; } 
    .SiteContent .SiteInnerContent .sf_3cols_3_33 { width: 227px; float:left; }

    .SiteContent .SiteInnerContent .LeftContent { }

    .SiteContent .SiteInnerContent .MiddleContent { }

    .SiteContent .SiteInnerContent .RightContent { }


    And then we added the LeftContent, MiddelContent, and RightContent to their respective fields in the Edit Properties Class of the layout in the template design screen.

    Example:  "sf_3cols_1_33 LeftContent"

  7. Matt
    Matt avatar
    42 posts
    Registered:
    25 Jan 2012
    01 May 2013 in reply to Katia
    Link to this post
    Hi Katia,
    Did you find away to disable the automatic generation of inline widths on the page layouts?  Using the important tag will work but once you start building responsive sites, you now need to override your previous important tags. It's not ideal.

    Thanks,
    Matt
  8. mdub
    mdub avatar
    12 posts
    Registered:
    22 Aug 2012
    19 Jun 2013
    Link to this post
    I am running into the in-line width problem as well.

    In theory, you may be able to add 100% layouts to fix this problem. By adding a 100% layout inside your custom layout you would be able to apply a class without editing the custom layout. You could apply a wrapper by adding putting your custom layer within a 100% layout.

    This might cause some additional issues with responsive design, but I don't think it would. The biggest issue for me is that by nesting layouts i this way you could easily end up with nine layers of divs for just a couple of content boxes. The layout on the template page would also look like a complete mess. For me, these two drawbacks make it most likely an unusable solution, but it may work for somebody.
  9. mdub
    mdub avatar
    12 posts
    Registered:
    22 Aug 2012
    19 Jun 2013
    Link to this post
    I am running into the in-line width problem as well.

    In theory, you may be able to add 100% layouts to fix this problem. By adding a 100% layout inside your custom layout you would be able to apply a class without editing the custom layout. You could apply a wrapper by adding putting your custom layer within a 100% layout.

    This could cause some additional issues with responsive design. The biggest issue for me is that by nesting layouts i this way you could easily end up with nine layers of divs for just a couple of content boxes. The layout on the template page would also look like a complete mess. For me, these two drawbacks make it most likely an unusable solution, but it may work for somebody.
9 posts, 1 answered