I want to build this kind of cards, that are in the same row, and which can be scroll through horizontally. Can you recommend any tool for doing so?
Cards
I'm using display:flex on my container but it doesn't do it.
You can set the overflow -x auto of the parent div container of the card, make it a flex container and flex-wrap with nowrap.
something like this
.parent-container {
display: flex;
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
}
.card-container {
min-width: 300px;
height: 380px;
background: green;
margin: 30px;
}
<div class="parent-container">
<div class="card-container"></div>
<div class="card-container"></div>
...
<div class="card-container"></div>
<div class="card-container"></div>
</div>
you can use display-flex; to parent div and with flex-direction: row;
to scroll add overflow-x: auto; scroll-behaviour: smooth; So it will adjust with you div element width;
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 11 months ago.
My overflow text has two parents, each have display: flex. The overflow with ellipsis seems only to work if on parent is removed. Otherwise the text keeps it width and determines the parent width. You can test it in the fiddle by reducing the browser width. What is wrong?
jsfiddle
.wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
background: lightgrey;
max-width: 600px;
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 20px;
}
<div class="wrap">
<div class="wrap">
<p>
1) looooooooooooooooooooooooooooooooooooong text
</p>
</div>
</div>
A very common problem when we try to make CSS shortcut for text is: when we try to combine flex-box layout (display: flex;) with text-overflow: ellipsis;.
The solution for this problem is to use min-width: 0; for parent element that we want to shortcut text.
So you can simply use min-width: 0px; in your parent div.
like
.wrap{
display: flex;
flex-wrap: wrap;
align-items: center;
background: lightgrey;
min-width: 0px; // use 0px in min width
}
try this your problem will be solved.
You have to define an explicit with (in this case 100%) on the flex containers.
It will work with this code:
.wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
background: lightgrey;
max-width: 600px;
width: 100%;
}
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 20px;
display: block;
width: 100%;
}
<div class="wrap">
<div class="wrap">
<p>
1) looooooooooooooooooooooooooooooooooooong text
</p>
</div>
</div>
Hello I am trying to implement horizontal scrolling (using scroll bars)but I can't get it to work properly
I have 2 divs 1 for scroll and 1 main div I want to display the items on the main div but when I do that the whole div scrolls, instead of only the items. How can I get this to work?
scroll div
<div class="scrolling-wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
main div
<div class="main">
</div>
CSS
.scrolling-wrapper {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.item {
display: inline-block;
align-self: flex-start;
background-color: var(--pampas);
border-radius: 10px;
flex-shrink: 0;
height: 269px;
margin-left: 210px;
margin-top: 13px;
width: 200px;
}
.main {
align-items: center;
background-color: white;
display: flex;
flex-direction: column;
height: auto;
justify-content: flex-start;
min-height: 1080px;
padding: 26px 0;
width: 1920px;
}
Here is how it looks right now.
Thank you <3
If I understand your question correctly, you want all the items to scroll together (i.e. not each one individually) but only inside div.scrolling-wrapper which is a child of div.main.
This only works if you restrict the width of div.scrolling-wrapper.
You most likely need
.scrolling-wrapper {
width: 100%;
/* you can also use max-width instead */
}
The 100% refer to the parent's width, in this case that of div.main. This is necessary because you have display:flex set on div.main which has the effect that its child div.scrolling-wrapper gets the sum of its children' (the .items) widths as its default width.
As a sidenote: Please mind that the following rules related to flexbox that you set on .item:
align-self: flex-start;
flex-shrink: 0;
don't have any effect unless there is some rule that you didn't mention in your original post that sets .scrolling-wrapper to display:flex.
I'm getting some unexpected behavior with my margins using flex and I would like some help in understanding why.
I'v got some simple html like so:
<div className="dashboard">
<div className="dashboard__inner-container">Inner Container</div>
</div>
And my scss file looks like this:
.dashboard {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1 1 auto;
background-color: #f4f6f8;
}
.dashboard__inner-container {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
width: 100%;
margin: 100px 50px;
}
What I am expecting is that the inner container will completely fill up the parent container, minus 100px on the top and bottom and 50px on the right and left. The vertical margin works as expected, but the horizontal margin actually extends out of the parent div, so that the inner container still appears to be taking up the entire width of the parent div.
I'm not sure if this is related to flexbox or not.
Here is an isolated CodePen https://codepen.io/MaxMillington2/pen/EQWZoj
When using align-items: center with column direction, the item will collapse to its content width, instead of with its default, stretch, which makes it fill its parent's width.
Additionally, when setting width: 100% to the inner, it will override the default stretch, which will make the item be 100% of parent's width + margin.
For the expected output, remove align-items: center on the outer and width: 100% on inner.
Stack snippet
html {
height: 100%;
overflow: auto;
}
.outer {
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f4f6f8;
height: 100%;
}
.inner {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
text-align: center;
margin: 100px 80px;
}
<div class='outer'>
outer
<div class='inner'>
inner
</div>
</div>
I'm making a horizontal scrolling site and encountering an issue where, when using flexbox, my content is pushed out of the page by my background image. Please see my pen:
https://codepen.io/anon/pen/NwgQmG
I'm using three background images that each take up a full page's width and inline-block to create horizontal scrolling.
In addition, I want to add flexbox so that I can create my own grid system on top of each background image. The problem is that when I add flexbox, I must use position: absolute on the first div below my background image so that the background image isn't pushed down to the bottom of the page.
<div id="homeImg" class="background-image-full">
<div class="container row" style="position: absolute;">
<div class="container column">
Hello There!
</div>
</div>
</div>
Then, when I attempt to add text to a container inside my grid system ("Hello There!"), the text does not show up. It's pushed to the upper left-hand corner, as indicated by inspect.
How can I get my text to show up? Is there a better way to use flexbox where I don't have to also use absolute positioning?
Thanks!
The problem is you set the font-size:0
Change it to some px value as I did it in this Codepen
Also you need to give position:relative to the same class i.e. .surroundContainer.
Which will make your container stick to the current image.
* {
margin: 0;
}
/*box-sizing will ensure an element stays within a parent width, even if padding or borders are applied.*/
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.wrapper {
height: 100vh;
background-color: gray;
}
.surroundContainer {
position: relative;
height: 100vh;
white-space: nowrap;
font-size: 20px;
color: white;
}
/* IGNORE: this is a class for a plugin */
.scroller {
/*This scroll-snap functionality only works in Safari*/
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-x: repeat(100%);
/*This scroll snap functionality is part of a polyfill
that enables the functionality in Chrome.*/
scroll-snap-type: mandatory;
scroll-snap-destination: 0% 100%;
scroll-snap-points-x: repeat(100%);
/*Here, I've set the width to be 100% of the VW
(the portion of the screen that the viewer sees before scrolling).
Thus, overflow occurs (because my divs stretch three screens or three VWs, basically)
and the scroll event from scrollsnap-polyfill.js is triggered.*/
width: 100vw;
overflow: auto;
}
.background-image-full {
height: 100%;
width: 100%;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
}
#homeImg {
background-image: url("https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg");
}
#AboutImg {
background-image: url("http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg");
}
#CreditImg {
background-image: url("https://www.bluecross.org.uk/sites/default/files/assets/images/124044lpr.jpg");
}
.container {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.row {
flex-flow: row;
-webkit-flex-flow: row;
}
.column {
flex-flow: column;
}
<!-- This is the wrapper for the entire page -->
<div class="wrapper">
<!-- This is the div that contains the horizontal scrolling -->
<div class="surroundContainer scroller">
<div id="homeImg" class="background-image-full">
<div class="container" style="position: absolute;">
<div class="column" style="border:5px solid white; height:300px; width:300px;">
<p>Hello There!</p>
</div>
</div>
</div>
<div id="CreditImg" class="background-image-full"></div>
<div id="AboutImg" class="background-image-full"></div>
</div>
</div>
I'm trying to center a div on a webpage using flexbox. I'm setting the following CSS properties. I see that it's being centered horizontally, but not vertically.
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
Here's the fiddle: JSFIDDLE
Can you explain what I'm doing wrong?
A <div> element without an explicit height defaults to the height of it's contents, as all block elements do. You'd probably want to set it to 100% of it's parent, the <body>, but that's not enough, since that is also a block element. So again, you need to set that to 100% height, to match it's parent, the <html>. And yet again, 100% is still required.
But once all that is done, you get that annoying vertical scroll bar. That's a result of the default margin the body has, and the way the box model is defined. You have several ways you can combat that, but the easiest is to set your margins to 0.
See corrected fiddle.
html, body {
height: 100%;
margin: 0px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
background-color: blue;
height: 50px;
width: 50px;
}
<div class="flex-container">
<div class="item">
</div>
</div>
You just need to set html, body, and your flex container to height: 100%. The reason it wasn't working is that your flex container didn't have an explicit height set, so it defaulted to the height of its contents.
Live Demo:
html, body {
height: 100%;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
background-color: blue;
height: 50px;
width: 50px;
}
<div class="flex-container">
<div class="item">
</div>
</div>
JSFiddle Version: http://jsfiddle.net/d4vkq3s7/3/