Could anyone give new ideas how to realize the following? If it generally possible).
The content of Left panel will be changed dynamically with Angular. So, we can have several items or, for example, 50 items on the panel. In accordance with that, the height of panel will be shorter or overflow hidden will be displayed.
Here is fiddle draft https://jsfiddle.net/b9on9gup/7/
First of all the div class="filter-title" should fill 100% height.
The second, title container shouldn't be in scrolling area. Scroll should be inside div class="radio-container". You could add class .shown on
div class="main-container" to display bottom panel.
Additional condition is good displaying with and without scroll (different quantity of items, different screen resolutions etc).
in fiddle I was trying different ways, so some css properties can be odd.
<body>
<div class = "main-container">
<div class="left-panel">
<div class="filter-container">
<div class="table">
<div class="table-row">
<div class="radio-container">
<div class="overflow">
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm" />
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
<div>
<label>
<input type="radio" name="filterFieldsForm"/>
radio button
</label>
</div>
</div>
</div>
<div class="filter-title">
<span>
Filter title
</span>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-panel"></div>
</div>
</body>
html, body {
height: 100%;
padding: 0;
position: relative;
margin: 0;
}
.main-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
.left-panel {
top: 0;
left: 0;
bottom: 0;
width: 300px;
background: #fff;
position: absolute;
transition: bottom 0.5s ease;
.filter-container {
position: absolute;
background: #F6F6F6;
top: 50%;
transform: translateY(-50%);
width: 100%;
.table {
display: table;
width: 100%;
.table-row {
display: table-row;
height: 100%;
.radio-container {
display: table-cell;
padding: 25px 25px;
display: table-cell;
vertical-align: middle;
.overflow {
overflow-y: scroll;
max-height: 100%;
}
}
}
.filter-title {
display: table-cell;
width: 20px;
background: #539ACC;
vertical-align: middle;
span {
-webkit-writing-mode: vertical-lr;
white-space: nowrap;
}
}
}
}
}
.bottom-panel {
height: 200px;
position: absolute;
bottom: -200px;
background: #F6F6F1;
width: 80%;
left: 0;
right: 0;
margin: auto;
transition: bottom 0.5s ease;
}
&.shown {
.left-panel {
bottom: 200px;
}
.bottom-panel {
bottom: 0;
}
}
}
The best decision I've found in my case is using max-height for div class= "overflow" and media-queries min-height.
I noticed scroll is displayed if to set max-height for div class= "overflow". But max-height should be at least in 'px', not in '%'.
Also max-height should be different for different resolutions. I set some breakpoints for max-height using media queries. Something like this:
@media(min-height:520px) {
max-height: 170px;
}
@media(min-height:600px) {
max-height: 250px;
}
@media(min-height:768px) {
max-height: 400px;
}
@media(min-height:900px) {
max-height: 500px;
}
.....
It allows me having panel's height shorter than browser view's height in any resolutions and having or not having scroll inside panel (depends on quantity of items)
The same approach is applied to filter title + text-overflow
Here is video - http://take.ms/WBDcy
and here is code - http://plnkr.co/edit/SbMa9Ece2eOPJ2C0Lt5U?p=preview
When I was writing this post I've understood that using of max-height: 80vh maybe was even better than media queries. It should be tested.