Top scrollbar not visible

Question

I am creating a horizontal scroll bar at the top of my table in HTML. I have been following this example:

horizontal scrollbar on top and bottom of table

This is my code: (I do not have .wrapper2 or .div2 as mentioned:

HTML

<div class="wrapper1">
    <div class="scrollTop"></div>
</div>
<div class="tableData">
    <table>
        "..."              
    </table>
</div>

CSS

.tableData {
    box-shadow: 10px 10px 5px #000;

    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    overflow: auto;
}

.wrapper1, .tableData {
    margin: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.wrapper1 {
    height: 20px;
}

.scrollTop {
    width: 1000px;
    height: 20px;
}

JS

$(function(){
    $(".wrapper1").scroll(function(){
        $(".tableData").scrollLeft($(".wrapper1").scrollLeft());
    });
    $(".tableData").scroll(function(){
        $(".wrapper1").scrollLeft($(".tableData").scrollLeft());
    });
});

My problem is that my top scroll bar is not visible. The container of it is but not the actual bar itself (as you can see):

All the JS is running properly so thinking it mush be an issue within the CSS? I'm not entirely sure.

EDIT

From the screenshot above, you can see that the bottom scroll bar within it's container is visible so it can be interacted with. The top scroll bar, however, is not. It's container is visible but the actual bar itself is not so cannot be interacted with and unable to scroll.

score 0 · Answer 1 · answered Oct 07 '15 at 13:36

0

Change your CSS to this:

.wrapper1, .tableData {
    width: 100%; 
    border: none 0px RED; 
    overflow-x: scroll; 
    overflow-y:hidden;
}

.tableData {
    box-shadow: 10px 10px 5px #000;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.wrapper1 {
    height: 20px; 
}

.tableData{
     height: 200px; 
}
.scrollTop {
    width:1000px; 
    height: 20px; 
}

table {
    width:1000px; 
    height: 200px; 
    overflow: auto;
}

Working example: http://jsfiddle.net/ggChris/d8ayfnnp/

answered Oct 07 '15 at 13:36

Chris

432
3
11

Still no bar displaying – wmash Oct 07 '15 at 13:43
Yes. Like in my screenshot, the container for it is but the bar within it is not – wmash Oct 07 '15 at 13:57
This is working for me? (http://jsfiddle.net/ggChris/d8ayfnnp/) Not sure if I misunderstand? – Chris Oct 07 '15 at 14:01

score 0 · Answer 2 · answered Oct 07 '15 at 13:36

0

Change Your CSS

.tableData {
box-shadow: 10px 10px 5px #000;

-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;

}

Demo Link http://jsfiddle.net/TBnqw/3144/

answered Oct 07 '15 at 13:36

Lalji Tadhani

14,041
3
23
40

Top scrollbar not visible

2 Answers2