javascript - CSS issues with expandable text inside modal

Question

I have a modal window that contains several expandable/collapsable questions. I tried hard for MINIMUM JS. I have 2 issues:

1. The text does not stay inside the viewport even when I use overflow:scroll .

2. I cannot stop the scroll of the page behind the modal window even when I use the :checked + body{overflow:hidden !important}

I have read several stackoverflow cases and searched the web for alternative solutions. Can you help?

Here is my code.

var coll = document.getElementsByClassName("qa");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("xactive");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
} 
});
}

/*Main*/
html, body, div, span, p, label, footer, header, section, button, input, textarea{
margin:0;
padding:0;
border:0;
font:inherit;
vertical-align:top;
user-select:text;
-webkit-user-select:text;
letter-spacing:0.01em}

button, input{
display:inline-block;
-webkit-appearance:none;
outline:none;
color:inherit;
overflow:visible;
background-color:transparent;
box-shadow:none;
border-radius:0}

button{cursor:pointer}

/*Button*/
.btn2{display:inline-block;
text-align:center;
line-height:1.17648;
white-space:nowrap;
font-size:19px;
font-weight:400;
color:#06c;
background:none;
max-width:100%;
min-width:26px;
padding-left:22px;
padding-right:22px;
padding-top:12px;
padding-bottom:12px;
border-radius:22px;
border:1px solid #06c;
text-overflow:ellipsis;
cursor:pointer;
vertical-align:middle;
position:relative;
z-index:1;
text-decoration:none;}

.btn2:hover{
background:#06c;
color:#fff}


/*Modal*/
.modal{opacity:0;
visibility:hidden;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
text-align:left;
background:#f2f2f2;
transition:opacity .1s ease;
z-index:7;
display:flex;
flex-direction:column;
height:100vh;
overflow-y:auto}

.modal__bg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
cursor:pointer}

.modal-state{display:none}

.modal-state:checked+.modal{
opacity:1;
visibility:visible}

.modal-state:checked+.modal .modal__inner{top:0}

.modal__inner{
transition:top .1s ease;
position:absolute;
right:0;
bottom:0;
left:0;
height:max-content;
max-width:700px;
margin:auto;
padding:1em 1em;
border-radius:5px}

.modal__close{
position:absolute;
right:1.1em;
top:-.3em;
width:1.1em;
height:1.1em;
cursor:pointer;z-index:1}

.modal__close:after,.modal__close:before{
content:'';
position:absolute;
width:2px;
height:1.5em;
background:#999;
display:block;
transform:rotate(45deg);
left:50%;
margin:-3px 0 0 -1px;top:0}

.modal__close:hover:after,.modal__close:hover:before{background:#000}

.modal__close:before{transform:rotate(-45deg)}

/*Text*/
.qa{
color:#000;
font-weight:600;
font-size:25px;
cursor:pointer;
padding-top:13px;
padding-bottom:13px;
width:100%;
border:none;
text-align:left;
outline:none;
background:none}

.qa:hover{color:#06c}

.qa:after{
content:'+';
color:#000;
float:right}

.xactive:after{content:'×'}

.qacontent{
font-size:25px;
padding-bottom:0;
max-height:0;
overflow:hidden;
transition:max-height 0.1s ease-out;
border-bottom:1px solid rgba(0,0,5,0.1)}

.qacontent p{
margin:0;
padding:0}

.modal:checked + body{overflow: hidden !important}

<section>
<div>
<label class="btn2" for="modal-authorinterview">Author Interview</label>
</div>
</section>

<input class="modal-state" id="modal-authorinterview" type="checkbox" /><div class="modal"><label class="modal__bg" for="modal-authorinterview"></label><div class="modal__inner"><label class="modal__close" for="modal-authorinterview"></label>

<button class="qa">Title</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

<button class="qa">Title2</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

<button class="qa">Title3</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

<button class="qa">Title4</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

</div></div>

question from:https://stackoverflow.com/questions/65622752/css-issues-with-expandable-text-inside-modal

Answer 1

Simply remove position:absolute from .modal__inner. It's not needed since you already set position:fixed to its parent. Change it to position:relative to keep the same painting order.

And for the scroll issue simply add

html {
  overflow:hidden
}

body {
  max-height:100vh;
  overflow:auto;
}

Full code:

var coll = document.getElementsByClassName("qa");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("xactive");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

/*Main*/

html,
body,
div,
span,
p,
label,
footer,
header,
section,
button,
input,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: top;
  user-select: text;
  -webkit-user-select: text;
  letter-spacing: 0.01em
}

button,
input {
  display: inline-block;
  -webkit-appearance: none;
  outline: none;
  color: inherit;
  overflow: visible;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0
}

button {
  cursor: pointer
}


/*Button*/

.btn2 {
  display: inline-block;
  text-align: center;
  line-height: 1.17648;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 400;
  color: #06c;
  background: none;
  max-width: 100%;
  min-width: 26px;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 22px;
  border: 1px solid #06c;
  text-overflow: ellipsis;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.btn2:hover {
  background: #06c;
  color: #fff
}


/*Modal*/

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: #f2f2f2;
  transition: opacity .1s ease;
  z-index: 7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer
}

.modal-state {
  display: none
}

.modal-state:checked+.modal {
  opacity: 1;
  visibility: visible
}

.modal-state:checked+.modal .modal__inner {
  top: 0
}

.modal__inner {
  transition: top .1s ease;
  height: max-content;
  position:relative;
  max-width: 700px;
  margin: auto;
  padding: 1em 1em;
  border-radius: 5px
}

.modal__close {
  position: absolute;
  right: 1.1em;
  top: -.3em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  z-index: 1
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #999;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #000
}

.modal__close:before {
  transform: rotate(-45deg)
}


/*Text*/

.qa {
  color: #000;
  font-weight: 600;
  font-size: 25px;
  cursor: pointer;
  padding-top: 13px;
  padding-bottom: 13px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  background: none
}

.qa:hover {
  color: #06c
}

.qa:after {
  content: '+';
  color: #000;
  float: right
}

.xactive:after {
  content: '×'
}

.qacontent {
  font-size: 25px;
  padding-bottom: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  border-bottom: 1px solid rgba(0, 0, 5, 0.1)
}

.qacontent p {
  margin: 0;
  padding: 0
}

html {
  overflow:hidden
}

body {
  max-height:100vh;
  overflow:auto;
}

<section>
  <div>
    <label class="btn2" for="modal-authorinterview">Author Interview</label>
  </div>
</section>

<input class="modal-state" id="modal-authorinterview" type="checkbox" />
<div class="modal"><label class="modal__bg" for="modal-authorinterview"></label>
  <div class="modal__inner"><label class="modal__close" for="modal-authorinterview"></label>

    <button class="qa">Title</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title2</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title3</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title4</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

  </div>
</div>

<p style="font-size:45px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, luctus quis pulvinar sit amet, tempor ac eros. Nam neque ex, gravida sit amet consequat ut, ullamcorper accumsan magna. In vulputate, lacus id dapibus finibus, magna nibh fringilla nisi, in tincidunt massa metus ut augue. Sed nisi nunc, faucibus varius massa eu, ornare cursus nibh. Suspendisse mauris erat, faucibus placerat volutpat et, commodo sed libero. Integer risus risus, pellentesque ac gravida ut, facilisis et ipsum. Morbi consectetur tincidunt eros, viverra consequat odio imperdiet in. Maecenas pellentesque, dui id placerat feugiat, turpis risus pellentesque lectus, sed congue massa orci in ex. Pellentesque volutpat eu lorem vel ultrices. Mauris ornare quis mauris in elementum. Proin dignissim est quam, tempor lacinia libero pretium nec. Fusce quis venenatis magna. Phasellus vitae volutpat sapien. Duis finibus, augue in sollicitudin molestie, turpis quam efficitur magna, sed dapibus dolor est nec orci. Proin mollis tellus eget risus malesuada, a consequat nunc dapibus. Donec quis nisl purus.</p>