CODEWITHSUNDEEP
htmlcssmodal-dialog
Anton Rand
Anton Rand

Reputation: 342

CSS - Scroll to bottom in Modal

Please see below code - run in fullscreen mode. Why can't I scroll to the bottom of the numbers?

I think it's because of the way I have created a modal but I cannot see how to get round this. This scenario will happen quite a lot with the application I am writing and I'm hoping to achieve this with pure CSS. I want to avoid any JavaScript hacks or lowering the height of the scrollable list to get the scroll going to the bottom (not flexible).

Thank you for any advice

.modal {
  position: fixed;
  left:     0;
  top:      0;
  width:    100%;
  height:   100%;
  overflow: hidden;
}

.modal-header {
  background-color: #FF5722;
  width:            100%;
  height:           52px;
}

.modal-content {
  background-color: white;
  width:            100%;
  height:           100%;
  display:          block;
  position:         relative;
}

.modal-title {
  font-size:    1.40em;
  line-height:  1.40em;
  margin:       0;
  position:     absolute;
  left:         15%;
  line-height:  52px;
  width:        70%;
  text-align:   center;
  color:        white;
}

.description {
  margin-bottom: 20px;  
}

.scrollable-list {
    background: #FFB74D;
    height: 100%;
    overflow: scroll;
    margin: 10px;
    font-size: 20px;
}
<div class="modal">
  <div class="modal-header">
    <header>
      <h1 class="modal-title">Title</h1>
    </header>
  </div>
  <div class="modal-content">
    <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula condimentum risus, eget vestibulum diam semper       pretium. Nunc ut vulputate magna. Nullam tincidunt enim neque, at tempor elit aliquam eu. Aliquam est dui, pretium a scelerisque ut, interdum ac nunc.
    </div>
    
        <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula condimentum risus, eget vestibulum diam semper       pretium. Nunc ut vulputate magna. Nullam tincidunt enim neque, at tempor elit aliquam eu. Aliquam est dui, pretium a scelerisque ut, interdum ac nunc.
    </div>
    
        <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula condimentum risus, eget vestibulum diam semper       pretium. Nunc ut vulputate magna. Nullam tincidunt enim neque, at tempor elit aliquam eu. Aliquam est dui, pretium a scelerisque ut, interdum ac nunc.
    </div>
    
        <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula condimentum risus, eget vestibulum diam semper       pretium. Nunc ut vulputate magna. Nullam tincidunt enim neque, at tempor elit aliquam eu. Aliquam est dui, pretium a scelerisque ut, interdum ac nunc.
    </div>
    
    <div class="scrollable-list">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      
      <div>11</div>
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
      <div>16</div>
      <div>17</div>
      <div>18</div>
      <div>19</div>
      <div>20</div>
      
      <div>21</div>
      <div>22</div>
      <div>23</div>
      <div>24</div>
      <div>25</div>
      <div>26</div>
      <div>27</div>
      <div>28</div>
      <div>29</div>
      <div>30</div>
        
     
      <div>31</div>
      <div>32</div>
      <div>33</div>
      <div>34</div>
      <div>35</div>
      <div>36</div>
      <div>37</div>
      <div>38</div>
      <div>39</div>
      <div>40</div>
        

    </div>
    
    
  </div>
</div>

Upvotes: 0

Views: 1496

Answers (1)

jwmoreland
jwmoreland

Reputation: 141

Change your .modal css property from "overflow: hidden" to "overflow: scroll". If you are wanting the header to stay put, then resize the modal content to fit vertically, and give it the overflow property.

Upvotes: 1

Related Questions