CODEWITHSUNDEEP
htmlcssscroll
LBes
LBes

Reputation: 3456

Scrollable element not showing a scroll bar

I created a div that I want to populate with elements in javascript. The number of elements is big so I wanted to make the div scrollable. I have done the following but the scroll bar does not show at all and my elements are added to the div but I can't scroll to see them.

<body>
   <div id="calendar" class="scrollable"></div>
</body>

.scrollable {
   padding-top:0.5%;
   height: 80%;
   overflow-y: scroll;
}

No specific things are done to the body of my project in CSS. Would you happen to know what is wrong?

Edit: the issue does not happen when I fix the size of .scrollable in px.

Thanks in advance

Upvotes: 0

Views: 55

Answers (3)

Deyvison Uchoa
Deyvison Uchoa

Reputation: 36

i would suggest using max-height on the parent div ( div with expected scroll behavior )

.scrollable {
   padding-top:0.5%;
   overflow-y: scroll;
   max-height: 50px;
}

.child{
  background-color: yellow;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      
    </style>
  </head>

  <body>
    <div class="scrollable">
      <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboruLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboruLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboruLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboruLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboruru</div>
    </div>
  </body>
</html>

Upvotes: 0

Vinith Almeida
Vinith Almeida

Reputation: 1471

Set a height on the parent elements, in this case the body and html.

html, body {
  height: 100%;
}
.scrollable {
   padding-top: 0.5%;
   height: 20%;
   overflow-y: scroll;
}

Upvotes: 1

Gulshan Aggarwal
Gulshan Aggarwal

Reputation: 999

Try to make the height of .scrollable in px or vh something like this.

.scrollable {
   padding-top:0.5%;
   height: 200px;
   overflow-y: scroll;
}

Upvotes: 0

Related Questions