This all takes place in an Angular 2 app.
I have a container with image placeholders that are sized relative to the parent. Each is 30% of the container width. Once the user has 3 images a fourth div is added so they can keep adding screenshots. As soon as I add another element to the container the scrollbar elements grow until they reach some kind of browser imposed size limit.
This all takes place in an Angular 2 app. I have a container with image placeholders that are sized relative to the parent. Each is 30% of the container width. Once the user has 3 images a fourth div is added so they can keep adding screenshots. As soon as I add another element to the container the scrollbar elements grow until they reach some kind of browser imposed size limit.
Before:
After:
Container css: .screenshots { white-space:nowrap; overflow-y:hidden; font-size: 0; }
Child css: .screenshot { cursor:pointer; width: 30%; padding-top: 55%; margin-right: 3.333333%; border-radius:15px; display:inline-block; text-align:center; font-size:16px; } .screenshot.blank { background-color:gainsboro; } .screenshot img { height:100%; } .screenshot .delete { position:absolute; display:inline-block; z-index:1; width: auto; color:white; top:5px; right:10px; text-shadow: 0 0 2px #000000; }