CODEWITHSUNDEEP
htmlcsswebkitscrollbar
TristanD27
TristanD27

Reputation: 89

Scrollbar formatting with webkit - Scrollbar not showing

So the title says it all really, I have formatted my scrollbar using webkit, I got the formatting looking ok but had to set the parent div to overflow:hidden to stop the scrollbar on the child div from filling the parent but now the bar has vanished.

Webpage with problem: http://aspiresupportandhousing.com/

You can see the problem under the news heading, you can see the track but not the thumb.

CSS:

#main_right {
    height: 500px;
    overflow: auto;
    width: 285px;
    top: 0px;
    right: 0px;
    background: url(../images/news.jpg) no-repeat center top #FFFFFF;
    border: 1px solid rgba(93, 93, 94, 0.4);
    border-radius: 20px;
    box-shadow: 10px 10px 20px #5d5d5e;
    position: absolute;
    overflow: hidden;
}

#news {
    height: 50px;
    width: 100px;
    top: 50px;
    right: 0px;
    position: absolute;
    border-radius: 20px 0px 0px 20px;
    background-color: #5d5d5e;
    padding: 0px 10px;
    line-height: 50px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    color: #FFFFFF;
}

#news_info {
    overflow: scroll;
    width: 265px;
    right: 0px;
    top: 150px;
    padding: 10px;
    position: relative;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5); 
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.8); 
}

HTML:

<div id="main_right">
        <div id="news">News</div>
        <div id="news_info">
          <?php
          require('news/wp-blog-header.php');
          ?>
          <?php
          $posts = get_posts('numberposts=5&order=DES&orderby=date');
          foreach ($posts as $post) : setup_postdata( $post ); ?>
          <?php the_title('<h3>', '</h3>'); ?>
          <?php the_excerpt('<b3>', '</b3>'); ?>
          <br> 
          <?php
          endforeach;
          ?>
        </div>
</div>

Any help would be greatly appreciated, thanks guys.

Upvotes: 1

Views: 2929

Answers (2)

Mike
Mike

Reputation: 21

just add height: 330px; and overflow-x: hidden; to #news_info

Upvotes: 1

Morpheus
Morpheus

Reputation: 9065

You need to add height to <div id="news_info"> in order for scrollbar to work.

#news_info {
   overflow-x: auto;
   width: 265px;
   right: 0px;
   top: 150px;
   padding: 10px;
   position: relative;
   height: 322px;
}

Upvotes: 4

Related Questions