CODEWITHSUNDEEP
csstwitter-bootstrap-3grid-system
Matt R
Matt R

Reputation: 171

bootstrap grid system and fixed sidebar

I am trying to create bootstrap grid page with two main sections. one is the app content and the other one is side nav bar. the nav bar is much shorter the the app content itself. what i am trying to accomplish is that whenever i scroll the page, the app side nav bat will always stick to the top of the page (top, not bottom of it)

my code:

<div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8">
      <app-content></app-content>
    </div>

    <div class="col-sm-4 col-md-4">
      <app-side-navbar></app-side-navbar>
    </div>

  </div>
</div>

whenever i scroll the page, i want to always see on the top right corner the app navbar.

thanks!

Upvotes: 1

Views: 4293

Answers (4)

Matt R
Matt R

Reputation: 171

this is what solved the issue for me:

<div class="row">

  <div class="app-wrapper">
    <div class="col-sm-10 col-md-10">
      <div class="col-sm-8 col-md-8">
        <app-content></app-content>
      </div>

      <div class="sticky">
        <div class="col-sm-4 col-md-4">
          <app-side-navbar></app-side-navbar>
        </div>
      </div>
    </div>

  </div>
</div>

and the css: 

.sticky {
  position: sticky;
  top:0;
  z-index: 999;
}

Upvotes: 1

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

Add this property to your app container

min-height:100vh;
max-height:100vh;
overflow:scroll;

Give position:fixed to your row. Added header to my sample as well.

.app {
  min-height: 100vh;
  max-height: 100vh;
  overflow: auto;
  background: red;
  color: white;
}

.row {
  position: fixed;
  width: 100%;
}

.header {
  height: 50px;
  background: blue;
  color: white;
}

.navigator {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 header">HEADER</div>
    <div class="col-sm-10">

      <div class="col-sm-8 app">
        APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>APP CONTENT
      </div>

      <div class="col-sm-4 navigator">
        NAVBAR
      </div>

    </div>
  </div>
</div>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16261

Try use fixed

 <div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8">
      <app-content></app-content>
    </div>
    <div class="nav-sticky">
      <div class="col-sm-4 col-md-4">
        <app-side-navbar></app-side-navbar>
      </div>
   </div>
</div>

And in css:

.nav-sticky{
  position: fixed;
  top: 0;
  height: 100%;
  overflow:hidden;
}

Upvotes: 0

Abin Thaha
Abin Thaha

Reputation: 4643

You can try using the overflow: auto for content wrapper only

<div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8 content">
      <div class='col-md-12 wrapper'>
        Content
      </div>
    </div>

    <div class="col-sm-4 col-md-4">
      Sidebar
    </div>
  </div>
</div>

.content {
  max-height: 100vh;
  overflow: auto;
}
.wrapper {
  height: 800px;
}

Let me know for more details

Upvotes: 0

Related Questions