CODEWITHSUNDEEP
htmlcssmodal-dialog
Anton Rand
Anton Rand

Reputation: 342

CSS Modal Scrolling

Please see the following Plunk: https://plnkr.co/edit/se1lRiXuQ4JtvqQcEtOA

I'm trying to create a modal suitable for a mobile application. Without changing the ordering of the HTML I need the CSS to achieve the following:

  1. Fix the Header at the top (always visible) when scrolling
  2. Keep the Buttons fixed underneath the header (always visible)
  3. Make the Item list scrollable

As the heights of the elements may vary I'd like to be able to do this generically. So that the heights are automatically calculated

I'm stumped, any ideas?

HTML

<div class="modal">
  <div class="modal-title">
    Header
  </div>
  <div class="modal-content">
    <div class="button-group">
      <div class="button selected">Button One</div>
      <div class="button">Button Two</div>
    </div>
    <div class="list"></div>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="item">Item 9</div>
      <div class="item">Item 10</div>
      <div class="item">Item 11</div>
      <div class="item">Item 12</div>
      <div class="item">Item 13</div>
      <div class="item">Item 14</div>
      <div class="item">Item 15</div>
      <div class="item">Item 16</div>
      <div class="item">Item 17</div>
      <div class="item">Item 18</div>
      <div class="item">Item 19</div>
      <div class="item">Item 20</div>
      <div class="item">Item 21</div>
      <div class="item">Item 22</div>
      <div class="item">Item 23</div>
      <div class="item">Item 24</div>
      <div class="item">Item 25</div>
      <div class="item">Item 26</div>
      <div class="item">Item 27</div>
      <div class="item">Item 28</div>
      <div class="item">Item 29</div>
      <div class="item">Item 30</div>
      <div class="item">Item 31</div>
      <div class="item">Item 32</div>
      <div class="item">Item 33</div>
      <div class="item">Item 34</div>
      <div class="item">Item 35</div>
      <div class="item">Item 36</div>
      <div class="item">Item 37</div>
      <div class="item">Item 38</div>
      <div class="item">Item 39</div>
      <div class="item">Item 40</div>

  </div>

</div>

CSS

body {
  margin: 0;
}

.modal {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e9f0f6;
  overflow: hidden;
}

.modal-title {
  background: #FF5722;
  height: 52px;
  text-align: center;
  color: white;
  font-size: 1.40em;
  line-height:  52px;
}

.modal-content {
  height: auto;
}

.button-group {
  display: flex;
}

.button.selected {
  background: #03A9F4;
  color: white;
}

.button {
  flex: 1;
  background: #2196F3;
  color: white;
  height: 26px;
  text-align: center;
  line-height:  26px;
  cursor: pointer;
}

.list {
  overflow-y: scroll;
  height: 100%;
}

.item {
  text-align: center;
  font-size: 1.40em;
  padding: 10px;
}

Upvotes: 0

Views: 131

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

Add the following changes to your CSS:

1. First, make your title position: fixed;, and give it a width: 100%.

.modal-title {
  position: fixed;
  width: 100%;
}

2. Do the same with the title, and add a top: 52px; so it won't be behind your title.

.button-group {
  top: 52px;
  position: fixed;
  width: 100%;
}

3. To make the list scrollable, remove the position: absolute; from your .modal class, then add some margin so your list isn't hidden behind your header and buttons.

.modal {
  position: absolute; //<--- Remove this
}

.modal-content {
  margin-top: 78px;
}

JSFiddle

As for the dynamic height issue, you cannot do that with CSS alone. Refer to this JavaScript solution if you'd like the buttons or title to change heights.

Upvotes: 1

Sebastian
Sebastian

Reputation: 148

  1. .modal-title{ position: fixed; top: 0; bottom: 0; width: 100%; }

  2. .button-group{ position: fixed; top: 52px; width: 100%; }

  3. .modal{ overflow: auto; }

now some items are hidden behind the header. Fix:

.modal-content {
    margin-top: 78px;
}

EDIT: Oh Hunter was faster, sorry

Upvotes: 1

Related Questions