CODEWITHSUNDEEP
htmlcss
Giox
Giox

Reputation: 5123

Vertical scrollbar is not shown

I've inherited a project from a colleague, and I'm facing a very strange behaviour I can't solve.

It's an HTML page that even if it's longer than the screen, it doesn't show the scrollbar and it's not possible to scroll at all, even with the mouse wheel. I've tried to look deeply in the CSS, using the Chrome inspector, but no way to make it scrollable.

I've added at the end of the page a big div, with red borders, so it's easier to see the issue.

Here is a live demo: http://mobile.natuplan.com/mobileapp/add-demo.aspx

Edit: I've simplified as much as possible the page to post some code:

<h3 class="modal-wnd"><a href="#" onclick="Close();" class="btn-back"><i class="fa fa-arrow-left"></i></a>
    Nuova Richiesta</h3>
<div class="content-wnd modal-wnd">
    <div id="pnlInsert" runat="server">
        <div>
            some content here...<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br /><br /><br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
            Lorem ipsum dolor sit amet and something else blabla bla<br />
        </div>
        <div id="bottom-spacer"></div>
    </div>

</div>

and the CSS:

#bottom-spacer { border: 3px dashed red ;height:550px;}
#pnlInsert{overflow-y:auto;}
.modal-wnd{}
.modal-wnd.content-wnd {
    padding: 10px 15px 10px 10px;
    margin-top: 40px; }

Upvotes: 0

Views: 137

Answers (3)

Sujan Gainju
Sujan Gainju

Reputation: 4769

In your css add 

#bottom-spacer {
    overflow: auto;
}

It will add the scrollbar when the content exceeds the height of the div.

#bottom-spacer {
    border: 3px dashed red;
    height: 90px;
    overflow: auto;
}

HERE IS AN EXAMPLE
<div id="bottom-spacer">
dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd dkjhasdk kjasd askjd 
</div>

Upvotes: 0

Paul
Paul

Reputation: 942

body {
    overflow: hidden;
}

in App.min.css. Change it to overflow: auto for example.

Upvotes: 2

flowest
flowest

Reputation: 173

remove 

body {
    overflow: hidden;
}

from App.min.css (line 1)

Upvotes: 2

Related Questions