0

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;
}
Anton Rand
  • 322
  • 5
  • 20

2 Answers2

1

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.

Community
  • 1
  • 1
Hunter Turner
  • 6,804
  • 11
  • 41
  • 56
  • Hi Hunter, Thank you for taking a look. I can't move the button group outside. I'm creating the modal as a reusable angular directive so I wouldn't be able to move it out. Is there a solution without changing the ordering of the HTML? – Anton Rand May 26 '16 at 20:13
  • @AntonRand Updated my answer. You can keep the buttons in their place if you use `top: 52px;` instead of `margin-top: 52px;` Let me know if there's anything else I can help you with :) – Hunter Turner May 26 '16 at 20:24
  • 1
    Hi Hunter, just tried it and it works well thank you. – Anton Rand May 27 '16 at 13:09
1

  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

Sebastian
  • 148
  • 1
  • 9