Ns789
Reputation: 531
Div contents are not scrolling up
I'm just trying to make a temporary reading software for reading module in IELTS just to improve my English reading skill. However, I'm trying to add onsite 1-40 answer fields onto the right side of the screen.
But cannot scroll all the 1-40 answer input fields. Somehow its not scrollable.
Tried overflow-y CSS property but no luck.
.sidepanel {
width: 0;
position: fixed;
z-index: 1;
height: 100%;
top: 0;
right: 0;
background-color: #111;
transition: 0.5s;
padding-top: 60px;
}<div id="mySidepanel" class="sidepanel">
<div class="container">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a>
<div class="row">
<div class="col-md-12">
<h6 class="text-center">Answer-sheet</h6>
<div class="form-group">
<label>1</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>2</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>3</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>4</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>5</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>6</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>7</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>8</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>9</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>10</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>11</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>12</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>13</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>14</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>15</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>16</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>17</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>18</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>19</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>20</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>21</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>22</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>23</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>24</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>25</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>26</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>27</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>28</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>29</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>30</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>31</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>32</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>33</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>34</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>35</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>36</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>37</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>38</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>39</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>40</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>Upvotes: 0
Views: 51
Answers (1)
Johannes
Reputation: 67748
You need to define height: 100% for the html and body elements, and add overflow-y: scroll (or auto) to your sidepanel element:
html, body {
height: 100%;
margin: 0;
}
.sidepanel {
box-sizing: border-box;
width: 180px;
position: fixed;
z-index: 1;
top: 0;
height: 100%;
right: 0;
background-color: #111;
transition: 0.5s;
padding-top: 60px;
overflow-y: scroll;
}<div id="mySidepanel" class="sidepanel">
<div class="container">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close</a>
<div class="row">
<div class="col-md-12">
<h6 class="text-center">Answer-sheet</h6>
<div class="form-group">
<label>1</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>2</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>3</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>4</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>5</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>6</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>7</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>8</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>9</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>10</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>11</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>12</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>13</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>14</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>15</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>16</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>17</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>18</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>19</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>20</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>21</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>22</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>23</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>24</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>25</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>26</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>27</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>28</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>29</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>30</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>31</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>32</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>33</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>34</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>35</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>36</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>37</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>38</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>39</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>40</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>Upvotes: 2
Related Questions
- How make the div scrollable?
- Why can't display scroll of div?
- Div scroll in Divs won't scroll
- Scrolling inside a div not working
- CSS - Why is my content not scrolling?
- Scroll not working?
- Trouble getting div to scroll [css]
- Why does the contained div not scroll?
- Html not scrolling
- DIV Element Not Scrolling