Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 290
Miguel Navas Avatar asked Sep 10 '15 15:09

Miguel Navas


People also ask

Why isn't my scroll bar showing?

Click Start > Settings. Under Windows Settings, scroll down, and then click Ease of Access > Display. Scroll down, and then set Automatically hide scroll bars in Windows to Off.

How do I show the scrollbar on overflow only?

Use overflow: auto . Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto ).

Why is my scroll bar not showing in HTML?

Scroll bars can disappear when a Web developer writes programming statements that prevent their display. For example, when an HTML Div element has more text than it can display at once, the developer can specify that the Div hide the excess, rather than accommodate it with scroll bars.


2 Answers

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)

like image 72
Alvaro Menéndez Avatar answered Nov 15 '22 05:11

Alvaro Menéndez


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.

like image 37
Aeolingamenfel Avatar answered Nov 15 '22 05:11

Aeolingamenfel