For so long, I've been struggling with this issue. I've attempted removing padding from the bottom and adjusting the size of the select field to match the inner height of the panel.
Take a look at my jsfiddle to see the problem firsthand: jsfiddle
My goal is to have the select list fill the entire height of the panel without any white space at the bottom.
I've experimented with JQuery as well, but haven't had any luck. When I resize the select menu, everything just gets bigger while the whitespace remains. A javascript solution would also be acceptable.
Here's the HTML:
<div class="panel panel-default" id="obs-list">
<div class="panel-heading">
<h3 class="panel-title">Observations</h3>
</div>
<div class="panel-body scroll-list" id="list-panel">
<div class="form-group">
<select class="form-control patient-list noglow" id="observation" name="observation" size="7">
<option value="1">2017-03-23 04:40:36</option>
<option value="2">2017-03-23 04:50:32</option>
<option value="4">2017-03-28 04:18:55</option>
<option value="5">2017-03-28 19:01:34</option>
<option value="11">2017-03-28 22:06:25</option>
<option value="12">2017-03-28 22:37:32</option>
<option value="13">2017-03-28 23:10:19</option>
<option value="14">2017-03-29 02:17:57</option>
</select>
</div>
</div>
</div>
And here's the CSS I'm using:
.patient-list {
font-size: 20px;
border: none;
}
.panel-body.scroll-list {
padding: 0px 0px 0px 0px;
}
Below is an example of the unwanted whitespace in my list: https://i.sstatic.net/MEvV2.png