0

I am working on two templates:
First one is: Simple-sidebar bootstrap template
Second one: Isotope Bootstrap template (dynamically-filtering-layouts-isotope-bootstrap)

I put the code of 2nd template inside "#page-content-wrapper" which is mentioned in the bootstrap template documentation. So far i am able to achieve this

http://codepen.io/argupta2301/pen/rOajEX

The problem I am facing is the toggle operation of the sidebar. Whenever I click on toggle menu the layout in the wrapper do not adapt the width of full window rather it stays the same. On my pc I can see 3 columns at first and when I click on toggle, the columns remain unchanged, but they must increase according to the new width. The sidebar toggle effect and the layout of the divs are working perfectly but I want them to adapt the width of the window after I click toggle button like the text written in adapts the width.

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            ....
        </ul>
    </div>
    <!-- sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="container group">
                           <ul class="nav navbar-nav navbar-left" id="controls">
                               <li><a href="#cat1">Category 1</a></li>
                               <li><a href="#cat2">Category 2</a></li>
                               <li><a href="#cat3">Category 3</a></li>
                           </ul>
                        </div>
                    </nav>
                    <p>This template........Make sure to keep all page content within the #page-content-wrapper.</p>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

                   <section id="main" class="row">
                        <div class="box cat1 cat2">
                            <p>Odd future 3 wolf moon twee, cliche marfa post-ironic pop-up master cleanse next level pickled gentrify. Direct trade small batch YOLO, pitchfork lomo PBR high life intelligentsia readymade letterpress flexitarian tousled. Direct trade pitchfork hoodie twee, yr pour-over Austin marfa 90's flexitarian food truck mlkshk helvetica +1 trust fund.</p>
                        </div>
                        .....
                   </section>
               .....
     </div>
2
  • havent recieved a single response guys..plz help!! Sep 7, 2015 at 17:58
  • I tried to replace var availableSpace = $(window).width(); in the javascript to #page-content-wrapper but of no use. Sep 9, 2015 at 6:22

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.