FIxed width column page layout
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
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>.sf_fixed250 float: left; width: 200px; .sf_auto float: none; .sf_auto .sf_2cols_2in margin: 0 0 0 200px; padding: 0; 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.
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; 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.
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"
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
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.
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.