CSS Horizontal DIV scroll

Question

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>

It's because #RTCChat is set to 600% width.

cport1
– cport1

2014-11-03 18:51:50 +00:00
Commented Nov 3, 2014 at 18:51 — cport1
– cport1, Commented Nov 3, 2014 at 18:51

DRD · Accepted Answer · 2014-11-03 18:50:25Z

2

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

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

answered Nov 3, 2014 at 18:50

DRD

5,83318 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Horizontal DIV scroll

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related