Recommand · May 20, 2021 0

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.

enter image description here

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>

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>