Horizontal Scrolling Not Showing Images

Question

This is my first time posting a question on here so Hi All!

I've almost set up a successful horizontal scroll but the scroll is at the bottom of the page and the scroll for the horizontal scroll isn't showing up as shown in this picture: HTML:

                    <article class="main-container grid_5 column">
                <!-- Main Container -->
                    <aside class="category-row">
                        <ul class="product-listing">
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                            <li>
                                <img class="main-container-images" src="assets/Placeholder_200x200.png" />
                            </li>
                        </ul>
                    </aside>
                </article>

CSS:

nav li {
display:inline;
}

li {
list-style: none;
}

.main-container-images {
width:150px;
}

.main-container li {
display: inline;
white-space: nowrap;
}

.category-row {
height: 175px;
overflow: scroll;
overflow-y: hidden;
}

ul.product-listing {
overflow-x: visible;
overflow-y: hidden;
}
li.product-listing {
display: inline-block;
}

Try setting a width or max-width value for `.category-row` – AlliterativeAlice Jan 04 '18 at 04:32 — AlliterativeAlice, Jan 04 '18 at 04:32

score 1 · Answer 1 · answered Jan 04 '18 at 04:37

You can set your display to table and table-cell.

The two classes you need to worry about are these two:

ul.product-listing {
  display:table;
  overflow-x: visible;
  overflow-y: hidden;
}
li.product-listing {
  display: table-cell;
}

Basically you need to set the ul element to display:table and the li elements to display:table-cell.

For a bit more info you can look at this answer: https://stackoverflow.com/a/20640664/6739517

score 0 · Answer 2 · answered Jan 04 '18 at 04:33

i thing you remove <ul> and <li> and add than it's work like:https://jsfiddle.net/yLy9hgfu/2/

add css in our style :

.product-listing {
    padding: 0;
    width: 50%;
    overflow: auto;
    border:1px solid #333;
}

.product-listing {
    padding: 0;
    width: 50%;
    overflow: scroll;
    border: 1px solid #333;
    display: -moz-box;
    display: -webkit-box;
}
.list {
    width: 230px;  background:#ddd;
    border: 1px solid #888;
    height: 40px;
}

like:https://jsfiddle.net/yLy9hgfu/2/

Horizontal Scrolling Not Showing Images

2 Answers2