CODEWITHSUNDEEP
angularjstwitter-bootstrap
robertsirwin
robertsirwin

Reputation: 191

Make one column of a Bootstrap row scrollable

I have been trying to figure out how/where to place the overflow: scroll style to a bootstrap div element with no luck. My application is angularjs talking to a local MySQL server...so not easy to put up a jsfiddle of it...I will try to attach a picture and some code and hopefully someone can steer me in the right direction.

My goal is to have a master list of songs on the left hand side which now has about 100 songs. Then I have three setlists to the right that I drag songs into to build out the sets. This all works ok using JQuery sortable stuff. My issue now is that the master songlist needs to scroll down to reach all songs while the setlists stay on the screen.

In the image attached the Bootstrap container is outlined in blue, the row in dashed red, the column in dashed green and finally the #masterList and #setxx DIVs are in solid red.

It looks like I have the scroll bar inside the right DIV of elements...but the page seems to render the entire list so the scroll happens at the browser level...and not within the DIV.

Any help would be greatly appreciated.

ER

    <div class="container">
      <div class="row">
        <div class="col-md-3">  <!-- Master song list DIV !-->     
            <div ng-controller="getMasterSongListController">
            <b>Song Master List</b>
              <div id="masterList" style="overflow: scroll;">
                  <div id="songID_{{song.ID}}" ng-repeat="song in songs | orderBy:'ID'" class="item">
                    {{song.ID}} - {{song.Title}}
                  </div>
              </div>                      
            </div>
        </div>

        <div class="col-md-3">  <!-- Set one DIV !-->
          <div ng-controller="getSongsSetOneController">
            <b>SET 01</b>
              <div id="setOne">
                  <div id="songID_{{song.ID}}" ng-repeat="song in setOneSongs" class="item">
                    {{song.ID}} - {{song.Title}}
                  </div>
              </div>                      
            </div>
        </div>

        <div class="col-md-3">  <!-- Set two DIV !-->
          <div ng-controller="getSongsSetTwoController">
            <b>SET 02</b>
              <div id="setTwo">
                  <div id="songID_{{song.ID}}" ng-repeat="song in setTwoSongs" class="item">
                    {{song.ID}} - {{song.Title}}
                  </div>
              </div>                      
            </div>
        </div>

        <div class="col-md-3">  <!-- Set three DIV !-->
          <div ng-controller="getSongsSetThreeController">
            <b>SET 03</b>
              <div id="setThree">
                  <div id="songID_{{song.ID}}" ng-repeat="song in setThreeSongs" class="item">
                    {{song.ID}} - {{song.Title}}
                  </div>
              </div>                      
            </div>
        </div>

      </div>
    </div>

Screenshot of Set List Maker Application

enter image description here

Upvotes: 2

Views: 8107

Answers (1)

Kudos
Kudos

Reputation: 1154

I guess you want something like this?

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.container-fluid {
    margin: 0;
    padding: 0;
}
.left,
.right {
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll; 
  text-align: center;
}

.left {
  background-color: #eee;
}
.right {
  background-color: khaki;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
  <div class="col-xs-3 left">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
  <div class="right">
    <div class="col-xs-3">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
    <div class="col-xs-3">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
    <div class="col-xs-3">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

Upvotes: 7

Related Questions