0

I'm currently using Materializecss to display a modal. In my modal I have a div Content displaying items using ng-repeat. The problem is, as the content is filled, then the css-rule of my content-div never gets picked up. The overflow (scrollbar) occurs on my modal instead of my content-div.

I actually want my title and buttons to be visible at all times.

the (simplified html):

<div class="modal">
     <div class="title"> ... </div>
     <div class="content">
        <ul>
             <li class="collection-item" ng-repeat="usr in returnedUsers">{{usr.UserName}}</li>
         </ul>
     <div class="button">
</div>

css-classes

.modal {
background-clip: padding-box;
background-color: #eee;
border-radius: 2px;
display: none;
left: 0;
margin: auto;
max-height: 70%;
max-width: 55%;
overflow-y: auto;
padding: 24px;
position: fixed;
right: 0;
transform: translate(0px);
z-index: 1000;

.content{
     max-height: 60%;
     overflow: auto;
}

simplified JSFiddle: fiddle

following SO-Post didn't solve the problem for me:

css max-height inside max-height

Table inside a div with max-height

firefox css max-width and max-height inside max-height div

Note: If possible i would like to prevent changes to the class modal

Note2: Setting height on my .contentdidn't solve it for me.

Community
  • 1
  • 1
User999999
  • 2,500
  • 7
  • 37
  • 63

1 Answers1

1

Here is a solution:

you need to give a fixed value in max-height to your .content ul instead of percentage

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

  • An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the 'height' property, not by content height).

Read more about overflow

    .modal {
      background-clip: padding-box;
      background-color: #eee;
      border-radius: 2px;
      left: 0;
      margin: auto;
      max-height: 70%;
      max-width: 55%;
      overflow-y: auto;
      padding: 24px;
      position: fixed;
      right: 0;
      transform: translate(0px);
      z-index: 1000;
    }
    .content ul {
      max-height: 70px; /* whatever you want*/
      overflow: auto;
    }
<div class="modal">
  <div class="title">MyTitle</div>
  <div class="content">
    <ul>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
    </ul>
    <div class="button">Btn1 - Btn2</div>
  </div>
dippas
  • 58,591
  • 15
  • 114
  • 126