CODEWITHSUNDEEP
htmlcssscrolloverflow
Miguel Navas
Miguel Navas

Reputation: 119

overflow:auto doesn't work, does not show the scroll bar

I need to put a vertical scrollbar on each md-content (content-left & content-right). I've been trying to figure this out for several hours, but it isn't working.

This is my example code: http://codepen.io/anon/pen/zvvodN

html: 

  <div ng-controller="AppCtrl" class="listdemoBasicUsage" ng-app="MyApp" >
      <div layout="row" class="main">
      <div flex="50" class="left">  
        <md-content class="content-left">
        <md-list>
          <md-subheader class="md-no-sticky">3 line item</md-subheader>
          <md-list-item class="md-3-line" ng-repeat="item in todos">
            <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
            <div class="md-list-item-text" layout="column">
              <h3>{{ item.who }}</h3>
              <h4>{{ item.what }}</h4>
              <p>{{ item.notes }}</p>
            </div>
          </md-list-item>
        </md-list>
      </md-content>
      </div>


       <div flex class="right">  
        <md-content class"content-right">
        <md-list>
          <md-subheader class="md-no-sticky">3 line item</md-subheader>
          <md-list-item class="md-3-line" ng-repeat="item in todos">
            <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}">
            <div class="md-list-item-text" layout="column">
              <h3>{{ item.who }}</h3>
              <h4>{{ item.what }}</h4>
              <p>{{ item.notes }}</p>
            </div>
          </md-list-item>
        </md-list>
      </md-content>
      </div>
      </div>
    </div>

css:

body{
  overflow:hidden;}
.main{
  border: 2px solid red;}
.left{
  border: 2px solid green;}
.content-left{
  overflow:auto;}
.right{
  border: 2px solid blue;}
.content-right{
  overflow: auto;}

Thank you for your help.

Upvotes: 8

Views: 27053

Answers (3)

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9032

As other people already said, you need a fixed height for overflow to work. In your codepen I see you have added to your body and html: height:100%. If your intention is to give your left and right content also 100% of the window height and scroll when not enough room, every children NEEDS the same height:100%

Basically if You add this

.content-left, .content-right, .left, .right, .layout, .listdemoBasicUsage {height:100%}

your codepen will look as I think you want.

codepen (your right content does not work because you have two "class="xxxxx" in the same html tag... choose one of put classes inside just one class)

Edited: Maybe your project will have a header and a footer with fixed height (or more elements). If that happens you may need to change the container your now 100% parent to:

height:calc(100% - XXpx - YYpx);

(where XX are your header height and YY your footer height) then it will still works the same as you can see in this modified codepen)

Upvotes: 7

cocoa
cocoa

Reputation: 3921

You need to let your containers know what the bounds are. So if you don't want to specify a height like @Aeolingamenfel said, you can do absolute positioning: 

.content-left {
  position: absolute;
  top: 0;
  bottom: 0;
}

Upvotes: 1

Ava
Ava

Reputation: 2429

overflow: auto; only works in conjunction with a fixed height for the element. If the element isn't fixed height, there will never be any overflow, so the auto will never apply.

Consider adding a max-height or height to .content-right and .content-left to make the scrollbar show up.

Upvotes: 5

Related Questions