CODEWITHSUNDEEP
htmlcssscrollbar
makak
makak

Reputation: 397

Proper scrollbar setup on html element

I have a header and a sidebar with form. On the form I wish to have a scroll bar when the form is larger then screen.

Here is html with inline style for the form:

<body>
<div id="wrap">
    <div id="header" class="navbar navbar-inverse navbar-fixed-top"></div>
    <div id="wrapper" class="toggled">
        <div id="sidebar-wrapper">
            <div id="sidebar-content">
                <form id="my-form" enctype="multipart/form-data" method="post" style="width: 235px; overflow-y: auto;height: 100%;position: absolute">
                    <label>Dropdown 1
                        <select id="select1"></select>
                    </label>
                    <label>
                        Dropdown 2
                        <select id="select2"></select>
                    </label>
                    <label>
                        Dropdown 3
                        <select id="select3"></select>
                    </label>
                    <label>
                        Dropdown 4
                        <select id="select4"></select>
                    </label>
                    <button class="btn btn-success btn-default">Submit</button>
                </form>

            </div>
            <a class="ToggleSidebar" href="#"></a>
        </div>
    </div>
    </div>

And here is JSfiddle with my approach so far.

The problem is that my scroll-bar appears only when I shrunk page above about the beginning of last drop-down and become useless, because I am not able to reach the button. And I really wish it to appear as soon as I shrink above button and make it scroollable to whole button.

Upvotes: 0

Views: 156

Answers (1)

lucian.nicolaescu
lucian.nicolaescu

Reputation: 647

Remove the height:100% for the sidebar and add top:60px, bottom:0px; Also, you don't need another position fixed for the wrapper, you can just add that top 60px or you can add a padding-top for the wrapper, but that is your choise.

See a working example here: https://jsfiddle.net/v7y9ghvz/4/

Upvotes: 1

Related Questions