CODEWITHSUNDEEP
cssoverflow
oyed
oyed

Reputation: 570

Allowing Overflow X

my code is as follows:

#under {
    width: 100%;
    height: 50px;
    background-color: #D4D4D4;
    border: none;
    -webkit-box-shadow: inset 0px 0px 4px 0px #000000;
    -moz-box-shadow: inset 0px 0px 4px 0px #000000;
    box-shadow: inset 0px 0px 4px 0px #000000;
    overflow-x: scroll;
    white-space: nowrap;
}
#under ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#under ul li {
    min-width: 100px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    background-color: #999;
    display: block;
}

Basically, I have the #under div with li elements inside of it. I want them to 'overflow' the container so that it can scroll on the X-axis, but I cannot for the life of me figure out how to do this!

It will make the li elements display under each other.

Any help is appreciated, thanks!

EDIT: Live Example https://babblebox.me/mobile/

Upvotes: 4

Views: 951

Answers (4)

Sonal Khunt
Sonal Khunt

Reputation: 1894

you have make width of #under to less than it is, than your overflow works and give width in pixel...

Upvotes: 0

Ashnur
Ashnur

Reputation: 366

You can always scroll the immediate children of an element. You can either make a really wide <ul> as Kokers said or, as I would do it, make apply the scrolling styling on the <ul>. 

#under {                                                                                                                                                                                                         
    width: 100%;
    height: 50px;
    background-color: #D4D4D4;
    border: none;
    -webkit-box-shadow: inset 0px 0px 4px 0px #000000;
    -moz-box-shadow: inset 0px 0px 4px 0px #000000;
    box-shadow: inset 0px 0px 4px 0px #000000;

}   
#under ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    overflow-x: scroll;
    white-space: nowrap;
}   
#under ul li {
    min-width: 100px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    background-color: #999;
    display: inline-block;
}

*Note: I changed in float: left; display: block to display: inline-block in #under ul li

here you can see it in action: http://jsfiddle.net/rvt5N/

Upvotes: 1

Kokers
Kokers

Reputation: 1828

they are still under because it's floating, and because width:100% it's resizing to available size of screen not div.

Basically i think you should add to ul some width

i mean: 

#under ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 8000px;
}

Upvotes: 2

Lee Price
Lee Price

Reputation: 5212

try overflow: auto; in #under ?

Upvotes: -1

Related Questions