Vertically responsive panel with overflow scroll

Question

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;
        }
    }
}

answer updated with a bit of javascript – rafaelcastrocouto Jul 31 '15 at 17:31 — rafaelcastrocouto, Jul 31 '15 at 17:31

rafaelcastrocouto · Answer 1 · 2015-07-31T17:30:53.247

UPDATE

It's a simple piece of javascript that you can edit to better fill your needs... it changes the title height if necessary (it actually changes the element's width since the 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>

http://jsbin.com/wiyuhu/edit?css,js,output

Thanks, Rafael. This is what I see http://take.ms/rWneB. But it's a little different what I need. It's might be some misunderstandings in my explanation. Title should have h100% of panel not of screen, panel is vertically centered. Title and radio-container have impact on panel height. http://take.ms/XLrJW. If I have short title and add a lot of items, the height of panel depends on total height of items. Than if there are no space, the overflow-y scroll should be displayed. If I have only 2 items but long title, height of panel depends on height of title but not lager than screen height. — Andriy.Bilyak, Jul 30 '15 at 06:22

score 0 · Accepted Answer · answered Aug 12 '15 at 08:53

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.

Vertically responsive panel with overflow scroll

2 Answers2