I want my tiles to be in the same row, and the container to scroll horizontally, if the tiles go beyond the width of the container. Looking at the following demo, the tiles get added to the next row, so I have to scroll vertically to access them. How can I make horizontal scroll work, and keep all tiles in the same row?
.container {
width: 600px;
max-height: 140px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap;
}
.tile {
width: 200px;
height: 92px;
float: left;
margin: 10px 10px 50px 10px;
background: cornflowerblue;
}
<div class="container">
<div><img class="tile"></div>
<div><img class="tile"></div>
<div><img class="tile"></div>
</div>
You need to set overflow-x:scroll; and overflow-y: hidden; on parent, and white-space:nowrap; on inner div and also display: inline-block; on floatLeft
.container {
width: 480px;
height: 140px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: hidden;
}
.inner {
height: 100%;
white-space:nowrap;
}
.floatLeft {
width: 200px;
height: 92px;
margin:10px 10px 50px 10px;
display: inline-block;
}
img {
height: 100%;
}
<div class="container">
<div class="inner">
<div class="floatLeft">
<img src="http://placehold.it/350x150" class="tile">
</div>
<div class="floatLeft">
<img src="http://placehold.it/350x150" class="tile">
</div>
<div class="floatLeft">
<img src="http://placehold.it/350x150" class="tile">
</div>
</div>
</div>
Add display: inline-block to your containing divs css:
.floatleft{
display: inline-block;
}
or alternatively you can add it as a style attribute on each div:
<body>
<div class="container">
<div style="display: inline-block" class="floatLeft">
<img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
<img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
<img class="tile">
</div>
</div>
</body>
Heres the working fiddle:
https://jsfiddle.net/edencorbin/rq0L7x7v/
HTML:
<div class="container" id="content">
<div >
<img src="img" height="190">
<img src="img" height="190">
</div>
CSS:
html, body {margin: 0; padding: 0;}
#content{
width: auto;
height:210px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#contentimg {
border: 0;
display: inline-block;
vertical-align: middle;
}
I want my tiles to be in the same row, and the container to scroll horizontally, if the tiles go beyond the width of the container.
Your .container class has a fixed with of 480px. If this is intentional then all you need to do is add display: inline-block to your .floatLeft class like so:
.container > .float-left {
display: inline-block;
}
Otherwise, you can make your .container class have a flexible width. If you like the suggestion, you can change the width to min-width: 480px that way your width will expand with your content.
.container {
min-width: 480px; /* changes occurred here */
max-height: 140px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: scroll;
white-space: nowrap;
}
However, if your screen width is too small to hold many tiles, then they will align vertically in a new row, which is normal expected behavior. Or better yet, you could do both. The choice is yours.
Related
What i would like to achieve is that i want to change the way my boxes appear only on the mobile version of the website. I experimented with display: and flex: rules but had no luck. I want them stick to each other but Couldn't find the right CSS rule. Help.
Thanks.
Example picture of how i want them:
The way they appear on desktop version of the website:
.m-image {
border: 5px dashed black;
width: 100%;
height: 70px;
margin: 10px 0;
position: relative;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
img {
width: 100%;
height: 300px;
}
<div class="m-image">
<img srcset="https://images.pexels.com/photos/6395415/pexels-photo-6395415.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"><img/></div>
<div class="m-image">
<img src="https://images.pexels.com/photos/6044656/pexels-photo-6044656.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"><img/></div>
<div class="m-image">
<img alt="" loading="lazy" src="https://images.pexels.com/photos/6045291/pexels-photo-6045291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /><img /></div>
.m-image {
border: 5px dashed black;
width: 100%;
height: 70px;
margin: 10px 0;
position: relative;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
img {
width: 100%;
height: 300px;
}
#media only screen and (max-width: 1000px) {
.main {
display: flex;
gap: 10px;
}
.m-image {
border: solid black 3px;
}
}
<div class = "main">
<div class="m-image">
<img srcset="https://images.pexels.com/photos/6395415/pexels-photo-6395415.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
</div>
<div class="m-image">
<img src="https://images.pexels.com/photos/6044656/pexels-photo-6044656.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
</div>
<div class="m-image">
<img alt="" loading="lazy" src="https://images.pexels.com/photos/6045291/pexels-photo-6045291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
</div>
</div>
Couple of things to think about when it comes to mobile view. When wanting certain items to display a certain way on mobile view you want to use #media only screen and (max-width: /* width of the device */. Place all the CSS rules inside of here. These rules will change the rules set above or run new rules that you have define below.
Also, when it comes to display: flex; you want to make sure you wrap it into another div. This "wrapper" or "container" will provide the structure to the way you want the images to display.
add a main container to compress the class m-image then add display flex
Ex:
<div id="main-container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
.main-container {
display: flex;
}
then add padding left and right to your m-image class
what you should do in this case is put your images in a single container and apply flex property in the css.
basically manipulate your html and css like this.
HTML:
<div class="image-container">
<div class="m-image">
<img srcset="https://images.pexels.com/photos/6395415/pexels-photo-6395415.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"><img/>
</div>
<div class="m-image">
<img src="https://images.pexels.com/photos/6044656/pexels-photo-6044656.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"><img/>
</div>
<div class="m-image">
<img alt="" loading="lazy" src="https://images.pexels.com/photos/6045291/pexels-photo-6045291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /><img />
</div>
</div>
CSS:
.image-container{
display:flex;
gap: 8px;
flex-wrap: nowrap;
}
.m-image {
border: 5px dashed black;
width: 100%;
height: 70px;
margin: 10px 0;
position: relative;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
img {
width: 100%;
height: 300px;
}
This should give you your desired result for the desktop and for the mobile version you will have to apply media query into your CSS code.
hope this answers your question!
I couldn't really understand your code, So I wrote one for you suiting your needs
I hope it will fix your problem!
#content{
display: flex;
justify-content: space-around;
width: 100%;
}
.imagecontainer{
overflow: hidden;
width: 30%;
}
img{
width: 100%;
}
<div id="content">
<div class="imagecontainer"><img src="https://images.pexels.com/photos/6395415/pexels-photo-6395415.jpeg"></div>
<div class="imagecontainer"><img src="https://images.pexels.com/photos/6044656/pexels-photo-6044656.jpeg"></div>
<div class="imagecontainer"><img src="https://images.pexels.com/photos/6045291/pexels-photo-6045291.jpeg"></div>
</div>
I have the following where I need the overflow hidden horizontally.
But overflow should be visible vertically.
Having issues where an overflow: hidden on x axis affects y -axis too.
I have tried to specify the axis for over flow as follows but it still hides the y axis.
.container{
.....
overflow-x: hidden;
}
See the screenshots to see what I am trying to achieve.
div.left {
margin-left: 10px;
background:blue;
height:200px;
width:300px;
}
.container{
padding-top: 20px;
margin-top: 10px;
background:black;
height:220px;
width:450px;
overflow: hidden;
}
.container > div {
display: table-cell;
}
.inner {
height: 500px;
background-color: red;
overflow-y: visible;
}
<div class="container">
<div>
<div class="left">
LEFT1
<div class="inner">
INNER
</div>
</div>
</div>
<div>
<div class="left">
LEFT2
</div>
</div>
</div>
Suggestions from from following blogs does not work for this scenario.
https://www.gavsblog.com/blog/only-hide-css-overflow-on-a-single-x-or-y-axis-or-ignore-it
https://css-tricks.com/popping-hidden-overflow/
This is what I have now.
Current
This is what I am trying to achieve.
Expected Result
I can't remove the x-axis overflow cos it would look like this where LEFT2 overflows horizontally which is also incorrect.
Removing overflow
Or is there another way to make overflow hidden on the x axis without the use of overflow:hidden ?
You can try to use grid approach to allow your cells to scroll.
Take a look at Code snippet's comments.
.container {
display: grid; /* make your container grid */
grid-template-columns: 2fr 1fr; /* create grid columns */
column-gap: 10px; /* add gap between columns */
padding: 20px 10px;
margin-top: 10px;
background: black;
height: 220px;
width: 450px;
/* overflow: hidden; */
}
.inner {
height: 500px;
background-color: red;
overflow-y: visible;
}
.container > div {
overflow-x: hidden; /* allow your cell to overflow */
}
div.left {
/*margin-left: 10px;*/
background: blue;
height: 200px;
width: 300px;
}
div.right {
background: green;
height: 300px;
width: 100px;
}
<div class="container">
<div>
<div class="left">
LEFT1
<div class="inner">
INNER
</div>
</div>
</div>
<div>
<div class="left">
LEFT2
</div>
</div>
</div>
Solution is overflow-x: clip:
div.left {
margin-left: 10px;
background:blue;
height:200px;
width:300px;
}
.container{
padding-top: 20px;
margin-top: 10px;
background:black;
height:220px;
width:450px;
overflow-x: clip;
overflow-y: visible;
}
.container > div {
display: table-cell;
}
.inner {
height: 500px;
background-color: red;
}
<div class="container">
<div class="aa">
<div class="left">
LEFT1
<div class="inner">
INNER
</div>
</div>
</div>
<div>
<div class="left">
LEFT2
</div>
</div>
</div>
Note: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
How do I make these elements scroll horizontally instead of vertically. Right now the divs are scrolling vertically I want them to scroll horizontally I can't find the solution and I even set the height of the container.
.specials{
padding: 9rem 0;
}
.specials__left{
height: 516px;
width: 60%;
overflow-x: scroll;
white-space: nowrap;
}
.specials__left-content{
height: 100%;
width: 60%;
margin-right: 30px;
display: inline-block;
float: left;
white-space: normal;
background-color: yellow;
margin-bottom: 40px;
}
<section class="specials">
<div class="specials__left">
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
<div class="specials__left-content"></div>
</div>
</section>
Try using this:
.grandparent {
width: 200px;
height: 125px;
overflow-x: scroll;
overflow-y: hidden;
}
.parent {
height: 100px;
white-space: nowrap;
}
.child {
display: inline-block;
height: 100px;
width: 100px;
margin-right: 30px;
background-color: blue;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div
The grandparent element has a limited width (causing the scroll) but the parent element provides the support using white-space: nowrap; to keep it from collapsing. Does this help?
I am building a UI component that has columns of information. Each column needs to be individually scrollable. I have found that on SO.com before, but I am having trouble reconciling that with the other requirement - that the page scrolls horizontally to show columns that do not fit on screen.
I have the horizontal scrolling working but cannot get it to work in conjunction with individual column scrolling. The code:
#board {
float: left;
height: 98%;
max-height: 98%;
width: 4300px; /*smaller than columns to force horizontal scroll */
margin: auto;
border: none;
overflow-x: scroll;
}
#columns {
height: 98%;
float: left;
width: 4800px; /* need this much width */
margin: auto;
border: none;
overflow-x:auto;
}
.column {
float: left;
padding-bottom: 50px;
width: 240px;
height: 100%;
max-height: 100%;
padding: 5px;
padding-bottom: 100px;
margin-left: 5px;
overflow-y: auto;
overflow-x: hidden;
}
<div id="board">
<div id="columns">
<div id="col1" class="column">
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
</div>
<div id="col2" class="column">
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
</div>
<!-- 12-16 more columns -->
</div>
</div>
Edited to fix id vs class issue in html.
I tried to simplify your code to only include what's necessary to solve your problem, but it should work. There are a couple errors in your CSS too: you have a style for #boards but the outer container has a class boards not an id, and you have a style for #columns but the middle inner container has an id of positions.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.board {
height: 100%;
width: 200px;
overflow-x: scroll;
}
#columns {
height: 100%;
width: 500px;
white-space: nowrap;
}
.column {
vertical-align: top;
height: 100%;
display: inline-block;
width: 150px;
overflow-y: auto;
overflow-x: hidden;
}
.card {
height: 200px;
background: #F00;
margin-bottom: 5px;
}
<div class="board">
<div id="columns">
<div class="column">
<div class="card">...content...</div>
<div class="card">...content...</div>
<div class="card">...content...</div>
<div class="card">...content...</div>
</div>
<div class="column">
<div class="card">...content...</div>
<div class="card">...content...</div>
<div class="card">...content...</div>
</div>
<div class="column">
<div class="card">...content...</div>
</div>
I have a simple demo of an error I found. There is a flex div and a few images inside.
The sizes of the div and the images are unknown, I put some fixed values just to represent the problem.
The problem is that the images are not overflowing the div's width in FF, but they do in Chrome (the expected and desired behavior).
The main goal is to make only 3 images to be visible (33.3333% of the div's width for each image), even if there are more than 3 images.
Demo: http://codepen.io/alexandernst/pen/mPoeLP
HTML:
<div class="wrapper">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
</div>
CSS:
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
display: flex;
overflow: hidden;
}
.box {
border: 1px solid green;
max-width: 33.33333%;
position: relative;
padding-right: 10px;
align-self: center;
}
I'd suggest wrapping each of the images in a div and use the .box class on that instead.
Seems to work in Chrome 51 + FF 46
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
display: flex;
align-items: center;
overflow: hidden;
}
.box {
border: 1px solid green;
flex: 0 0 33.33333%;
position: relative;
padding-right: 10px;
}
.box img {
width: 100%;
height: auto;
display: block;
}
<div class="wrapper">
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
<div class="box">
<img src="http://placehold.it/150x150">
</div>
</div>
It is because you have padding-right. Try adding box-sizing: border-box;:
.box {
border: 1px solid green;
max-width: 33.33333%;
box-sizing: border-box;
position: relative;
padding-right: 10px;
align-self: center;
}
box-sizing will take padding in its calculations.
Updated codepen.