html - Vertically responsive panel with overflow scroll -
could give new ideas how realize following? if possible).
the content of left panel changed dynamically angular. so, can have several items or, example, 50 items on panel. in accordance that, height of panel shorter or overflow hidden displayed.
here fiddle draft https://jsfiddle.net/b9on9gup/7/
first of div class="filter-title" should fill 100% height. second, title container shouldn't in scrolling area. scroll should inside div class="radio-container". add class .shown on div class="main-container" display bottom panel.
additional condition displaying , without scroll (different quantity of items, different screen resolutions etc).
in fiddle trying different ways, css properties can 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; } } }
update
it's simple piece of javascript can edit better fill needs... changes title height if necessary (it changes element's width since it's rotated 90deg)
var ftitle = document.queryselector('.filter-title'); var radiocont = document.queryselector('.radio-container'); var w = ftitle.clientwidth; var h = radiocont.clientheight; if (h > w) { ftitle.style.width = h + 'px';}.left-panel { position: relative; width: 150px; } /* .radio-container { height: 100px; overflow: auto; } */ .radio-container label { display: block; } .filter-title { background: #ddd; text-align: center; position: absolute; top: 0; left: 0; transform: translatex(170px) rotate(90deg); transform-origin: 0 0; }<!doctype html> <html> <head> <meta charset="utf-8"> <title>js bin</title> </head> <body> <div class = "main-container"> <div class="left-panel"> <div class="radio-container"> <label> <input type="radio" name="filterfieldsform"/> radio button1 </label> <label> <input type="radio" name="filterfieldsform"/> radio button2 </label> <label> <input type="radio" name="filterfieldsform" /> radio button3 </label> <label> <input type="radio" name="filterfieldsform" /> radio button4 </label> <label> <input type="radio" name="filterfieldsform"/> radio button5 </label> <label> <input type="radio" name="filterfieldsform" /> radio button6 </label> <label> <input type="radio" name="filterfieldsform" /> radio button7 </label> <label> <input type="radio" name="filterfieldsform"/> radio button8 </label> <label> <input type="radio" name="filterfieldsform" /> radio button9 </label> <label> <input type="radio" name="filterfieldsform" /> radio button10 </label> <label> <input type="radio" name="filterfieldsform"/> radio button11 </label> <label> <input type="radio" name="filterfieldsform" /> radio button12 </label> <label> <input type="radio" name="filterfieldsform" /> radio button13 </label> <label> <input type="radio" name="filterfieldsform" /> radio button14 </label> </div> <div class="filter-title"> <span>filter title</span> </div> </div> </div> </body> </html>
Comments
Post a Comment