MaterializeCSS modal header

Question

I'm using materializecss framework, right, and I'm trying to make a "modal-header" the same as "modal-footer.

Like, when I use "modal-footer", it creates a block over the modal that stops even scrollbar.

So I copyed some "modal-footer" propreties and paste on a new "modal-header" class on css.

Look:

HTML:

<div id="termosdecontrato" class="modal modal-fixed-footer">
<div class="modal-header"><h4 class="centroh">Termos de contrato</h4></div>
<div class="modal-content">

<p style="text-align:justify;text-justify:inter-word;">Lorem ipsum</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Entendi</a>
</div>
</div>

CSS:

.modal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  overflow-y: auto;
  border-radius: 2px;
  will-change: top, opacity; }
  @media only screen and (max-width : 992px) {
    .modal {
      width: 80%; } }
  .modal h1, .modal h2, .modal h3, .modal h4 {
    margin-top: 0; }
  .modal .modal-content {
    padding: 24px; }
  .modal .modal-close {
    cursor: pointer; }
  .modal .modal-header {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%; }
  .modal .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%; }
    .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
      float: right;
      margin: 6px 0; }

.lean-overlay {
  position: fixed;
  z-index: 999;
  top: -100px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 125%;
  width: 100%;
  background: #000;
  display: none;
  will-change: opacity; }

.modal.modal-fixed-footer {
  padding: 0;
  height: 70%; }
    .modal.modal-fixed-footer .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0; }
  .modal.modal-fixed-footer .modal-content {
    position: absolute;
    height: calc(100% - 56px);
    max-height: 100%;
    width: 100%;
    overflow-y: auto; }
  .modal.modal-fixed-footer .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0; }

But I have this: https://i.sstatic.net/5diOy.png

PS.: My past questions is getting low reputations, why? PS².: I CAN'T post images yet, ok?

Answer 1

The reason the modal's content is invading the header's space is because your "modal-header" and your "modal-content" divs are both absolutely positioned.

An element with a position of "absolute" is placed on the page relative to it's container element - that being the closest positioned element ("absolute," "relative," or "fixed") that contains it.

This means that your two divs only care about their immediate parent, the "modal" div, and they completely disregard each other.

While a z-index on your "modal-header" div and a new calc-height and margin-top on the "modal" div will fix the issue visually, the recommended solution would be to change both your "modal-header" and your "modal-content" divs to be relatively positioned to each other, and then work on having the overflow of content wrapped so it adheres to the "modal-content" divs size.

Hope that helps!

Here's a decent css-tricks article on the issue