1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Inline verticall scrollbar

Discussion in 'CSS' started by Johansonn, Sep 13, 2016.

  1. #1
    Hi, I have changed Gentelella HTML theme (https://colorlib.com/polygon/gentelella/plain_page.html). The customized version is here:
    http://1geeky.ir/test/production/plain_page.html

    The issue is
    1. the whole site (body) has a vertical scrollbar
    2. I need a vertical scrollbar for the middle portion of the page (The div with the .inner-left-container class); but when I add overflow-y: scroll;, it will scroll an extra height which exceeds screen's height.
    Also if you see the left side-bar, it does not scroll despite it has elements hidden at the end of its bottom. How could I restore the scrolling feature for the sidebar like what is here? :
    https://colorlib.com/polygon/gentelella/fixed_sidebar.html

    Thanks

     
    Last edited: Sep 13, 2016
    Johansonn, Sep 13, 2016 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Don't set heights on elements unless you have compelling reason, in this case, you want a limited height on the aggregate middle column.
    
    .inner-left {
      border-right: 1px solid #d8d8d8;
      float: left;
      height: 50%;   <<<< limit the height
      overflow: auto;
      padding: 0 10px;
      width: 75%;
    }
    Code (markup):
    Delete the height property on the chart class. It creates a faux overflow condition equal to the height of the middle column.

    I see no reason to scroll individual elements on this page.

    gary
     
    kk5st, Sep 13, 2016 IP
  3. Johansonn

    Johansonn Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thank you Gary :)
    I limited the height of .inner-left to 50% and removed height property on .charts but the scrollbar of body and the whole page remains.
    After all, I set the height of the middle column 100% because I want its right border stretch to the bottom of the window.

    Do you have any idea about sidebar vertical scrolling? :

    I really appreciate your help
     
    Johansonn, Sep 14, 2016 IP
  4. karjen

    karjen Member

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    48
    #4
    Also if you see the left side-bar, it does not scroll despite it has elements hidden at the end of its bottom. How could I restore the scrolling feature for the sidebar like what is here? :
    https://colorlib.com/polygon/gentelella/fixed_sidebar.html


    To fix this first issue :
    .left_col{
       position:fixed;
    }
    Code (CSS):
     
    karjen, Sep 17, 2016 IP