CODEWITHSUNDEEP
htmlcss
Skand Jain
Skand Jain

Reputation: 11

want to make only close button overflow visible inside a modal

I want to display full close button/text while maintaining modal's position:fixed and overflow:scroll if i replace overflow:scroll with overflow:visible it appears fully but stops scrolling 

<div id="root_component">
       <div class="modal" >
               <a class="modal-close btn-floating btn-small 
                   waves-effect waves-light right clearfix">
                        <i class="material-icons">cancel</i>
                    </a>
          <div class="modal-content"></div>
     </div>    
</div>



.modal {
        width: 80% !important;
        overflow-y: scroll;
        z-index: 1003;
        display: block;
        opacity: 1;
        transform: scaleX(1) scaleY(1);
        position: fixed;
        padding: 0;
        margin: auto;
        border-radius: 2px;
    }
    #root_component .clearfix {
        position: absolute;
        right: -16px;
        top: -16px;
        z-index: 100;
    }

screenshot attached

Upvotes: 1

Views: 513

Answers (2)

strblr
strblr

Reputation: 950

Just wrap your .parent div in another .parent-wrapper div and take your .child div out of .parent. This works :

    .grand-parent {
      position: relative;
      height: 10px;
      width: 10px;
      background: red;
      top: 10px;
    }

    .parent-wrapper {
      height: 150px;
      width: 60px;
      position: fixed;
    }

    .parent {
      height: 150px;
      width: 60px;
      overflow: scroll;
      background: blue;
    }

    .child {
      overflow: visible;
      position: absolute;
      top: 10px;
      left: 20px;
      background: yellow;
    }
<div class="grand-parent">
      <div></div>
      <div class="parent-wrapper">
        <div class="parent">adfasdf<br> asdf
          <br> asdf
          <br> adsf
          <br> asdfasd
          <br> fads
          <br> fdsaf
          <br> sadfasd
          <br> afdsf
        </div>
        <div class="child"> close</div>
      </div>
    </div>

Upvotes: 1

krsna
krsna

Reputation: 4333

If this is what you're trying to do, you have to make the .child class position fixed. The close button/text position will be fixed irrespective of scroll on the divs.

.grand-parent {
  position: relative;
  height: 10px;
  width: 10px;
  background: red;
  top: 10px;
}

.parent {
  height: 150px;
  width: 60px;
  overflow: scroll;
  background: blue;
  position: fixed;
}

.child {
  overflow: visible;
  position: fixed;
  top: 20px;
  left: 30px;
  background: yellow;
}
<div class="grand-parent">
  <div></div>
  <div class="parent">adfasdf<br> asdf
    <br> asdf
    <br> adsf
    <br> asdfasd
    <br> fads
    <br> fdsaf
    <br> sadfasd
    <br> afdsf
    <div class="child"> close</div>
  </div>
</div>

Upvotes: 0

Related Questions