This project is read-only.

Custom Page layout without left navigation bar

Jul 7, 2014 at 2:53 PM
Hi ,

I am trying to create a custom page without left navigation bar , i am able to hide the left navigation and creating the page layout as shown below
<div class="row"> <div class="col-sm-12 "> </div> </div> but this is not taking the full page as the code coming from master page is preventing this.
this div class col-sm-9 and col-lg-10 is creating problem and for this my code is working for full width.
<div class="col-sm-9 col-lg-10">




                            </SharePoint:AjaxDelta>
                            <SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" BlockElement="true" IsMainContent="true" runat="server">
                                <a id="mainContent" name="mainContent" tabindex="-1"></a>
                                <asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server" />
                            </SharePoint:AjaxDelta>

                        </div>
                    </div>

Kindly provide your solution i am stuck in middle.please help!
Coordinator
Jul 21, 2014 at 11:52 PM
The problem is that there must be a col-sm-3 col-lg-2 div to the left of this main div correct?

I like to try the following:

In your custom page layout that you do not want to have the left quicklaunch, in the additional header content placeholder, add:
<script>
document.documentElement.className += document.documentElement.className + ' hideLeftNav';
</script>
If you are using HTML Page Layouts, you will have to turn this into a quasi-snippet similar to http://ericoverfield.com/sharepoint-2013-tricks-inline-styles/.

Now add another class to your wrapper div, such as:

...
<div class="col-sm-9 col-lg-10 mainContentBlock">
...

You can now add css similar to:

...
.hideLeftNav .mainContentBlock {width: 100;}
...

I might be missing a few styles such as additional padding you need to remove, but basically what this is doing is the page layout will add a class to your <html> html tag. You can then target your main div with new class "mainContentBlock" to act as 100% only when the .hideLeftNav class is found in the html tag.

I hope this helps.

Eric