How to Create A Horizontal ScrollBar in Tab Container (Not Vertical Scrollbar)

I would like to create a horizontal scrollbar for Ajax Tab Container when tabs overflow. I can create a vertical scrollbar for it but I want horizontal scrollbar instead.

Current Output:

enter image description here

Plan to Achieve:

enter image description here

This is my codes:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $(function () {

        $(".ajax__tab_header").html("<div style='height:80px;width:1200px;' >" + $(".ajax__tab_header").html() + "</div>");

    })
</script>
<style>
    .ajax__tab_header {
        height: 40px !important;
        width: 200px;
        overflow: scroll;
        overflow-y: hidden;
    }
</style>

Question: How to create a horizontal scrollbar, not vertical scrollbar when tabs overflow.
Appreciate if someone can help me on this, thanks a lot!!

Regards,

Felicia


Source: css

Leave a Reply