CODEWITHSUNDEEP
htmlcssscrollbar
Saumil
Saumil

Reputation: 2517

Scrollbar not working

Below is my html file,

<div class="col-xs-6 col-sm-3 my1" id="qwer1" role="navigation">        <!--Change is made here-->
          <div class="menuBar">
            <ul class="menuList" id="menuList">
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <hr>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->

Below is the css file,

.my1
{
    position:fixed;
    left:78%;
    border-left:1px solid black;
    border-bottom:1px solid black;
    width:20%;
    top:14%;
    height:auto;
    overflow:scroll;
    scroll-face-color:red;
}

The content of the html file is well out of the sreen, but eventhough the scrollbar is not operable. Moreover, I have specified the color of the scrollbar as red but the color effect also doesnt seem to be working. Below is the screenshot of browser,

enter image description here

How can I activte this scrollbar? Thanks in advance.

Upvotes: 4

Views: 26326

Answers (3)

Utkarsh verma
Utkarsh verma

Reputation: 169

This problem may be solved if the following meta tags are in your html:

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Also, be sure to remove height auto

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

The problem is that you specified:

height:auto;

under the .my1 rule, so the div will expand in height as much as needed to accommodate the content.

If you had fixed the height, you would activate the scroll bar.

See demo at: http://jsfiddle.net/audetwebdesign/myPZB/

As far as trying to style the color of the scroll bar, the property of interest is:

scrollbar-face-color

and I think this is only supported on IE browsers at this time.

Reference: http://msdn.microsoft.com/en-us/library/ie/ms531157%28v=vs.85%29.aspx

Upvotes: 5

lynndragon
lynndragon

Reputation: 370

height:50%

try this..I tested ok..if 'auto' , scroll is not work

Upvotes: 3

Related Questions