CODEWITHSUNDEEP
cssscrolloverflow
Kathy Judd
Kathy Judd

Reputation: 25

CSS Horizontal DIV scroll

I have a list of video elements that I want to scroll horizontally if they overflow the width of the container. Unfortunately I got the it to scroll but the scroll bar is way to long.

I just want to the scroll to the length of the content.

Demo at http://jsfiddle.net/d16uh70k/

CSS

    #RTCChatContainer
    {
        /*overflow: auto;*/
        overflow-x: scroll;
        overflow-y: hidden;
        height: 152px;
        width: 100%;
        border: 1px dashed blue;
    }

    #RTCChat
    {
        display: block;
        height: 122px;
        width: 600%;
        max-width: 600%;
        border: 1px dashed red;
    }

        #RTCChat video
        {
            display: inline-block;
            border: 1px solid black;
        }

HTML 

    <div id="ContentWrapper" class="row">
        <div class="col-sm-4">



        </div>
        <div class="col-sm-8">

            <div id="RTCChatContainer">
                <div id="RTCChat"><video id="RTCMyVideo" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf0" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf1" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf2" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf3" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf4" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf5" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf6" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf7" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf8" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video><video id="asdfsdf9" poster="http://i.imgur.com/plrR0w1.png" autoplay="true" muted="true" height="112" width="150"></video></div>
            </div>


        </div>
    </div>
    <footer></footer>
</div>

Upvotes: 0

Views: 542

Answers (1)

DRD
DRD

Reputation: 5813

Change #RTCChat to the following: http://jsfiddle.net/55z6tnL0/.

#RTCChat {
    height: 122px;
    white-space: nowrap;
}

Upvotes: 2

Related Questions