Layout with text and images where bottom and top is aligned - javascript

Trying to create layout like this:
Rules:
2 columns.
Each column can contain any number of images (2 and 3 in our case).
Each image can have a caption with any length.
The first images in each column must be aligned.
The last images in each column must be aligned.
We do not know how much lines caption will occupy, but we know aspect ratio of each image.
Current work in progress on JSFiddle https://jsfiddle.net/LpL2jmgj/
Will post updates if I'll find a solution.
I guess it's not possible to do this just via CSS even with display:grid?

is this your answer???
i just use flex box and a little of margin , i hope you like it :)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.columns {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
flex-wrap: nowrap;
margin : 5px;
}
.rows{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin : 5px;
flex-wrap: nowrap;
}
p{
margin : 2px;
}
.col {
width: 100px;
margin : 5px;
position: relative;
}
.col1 {
margin : 5px;
flex : 5;
background-color : red;
height : 200vh;
}
.col2{
margin : 5px;
flex:3;
background-color : blue;
height : 200vh;
}
.image {
width: 100%;
position: relative;
height: 0;
overflow: hidden;
}
.image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div class="rows">
<div class="col1">
<div class="columns">
<img style="width:100%;" src="https://dummyimage.com/600x400/000/fff" />
<p>text</p>
</div>
<div class="columns">
<img style="width:100%;" src="https://dummyimage.com/600x400/000/fff" />
<div class="rows">
<p>text</p>
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
</div>
</div>
</div>
<div class="col2">
<div class="columns">
<img style="width:100%" src="https://dummyimage.com/600x400/000/fff" />
<div class="rows"><p>text</p> <p>text</p> <p>text</p> </div>
<div class="rows"><p>text</p> <p>text</p> <p>text</p> </div>
<div class="rows"><p>text</p> <p>text</p> <p>text</p> </div>
</div>
<div class="columns">
<img style="width:100%" src="https://dummyimage.com/600x400/000/fff" />
<p>text</p>
</div>
<div class="columns">
<img style="width:100%" src="https://dummyimage.com/600x400/000/fff" />
<p>text</p>
</div>
</div>
</div>

Related

CSS "position: sticky" on horizontal scroll

I'm trying to build a horizontal scroll with multiple content boxes that belong to one title. So I'd like the title to stay while the content scrolls past it, until the next section with a new title comes.
Here's what I was trying to do: https://jsfiddle.net/kjo4duts/23/
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.scroll {
display: flex;
flex-direction: row;
width: 100vw;
height: 100px;
background: yellow;
overflow: scroll;
}
.item {
flex-shrink: 0;
width: 200px;
height: 100%;
margin-right: 20px;
}
.scroll .item .title {
position: sticky;
left: 0;
top: 0;
width: 100%;
height: 40px;
}
.item .content {
width: 100%;
height: 60px;
border: 3px solid green;
}
<div class="scroll">
<div class="item">
<div class="title">
Title 1
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
Title 2
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
</div>
<div class="content">
Content
</div>
</div>
</div>
Is there a way to address the "position: sticky" property to the outer parent (.scroll)? Or is there a smooth way to do it in JavaScript?
I tried to change the HTML structure, but with Flexbox you need a container for each box to get a horizontal layout..
Thanks in advance!
Edit: For anyone with the same problem. The solution is to add a relative position to the outer parent and the change the HTML structure a bit.
See updated Fiddle: https://jsfiddle.net/r2czqwn7/20/
Parent (.scroll) has to be position: relative at first as you can check below but I would consider different structure (all contents with same title could be in same div) to stick it over multiple items.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.scroll {
position: relative;
display: flex;
flex-direction: row;
width: 100vw;
height: 100px;
background: yellow;
overflow: scroll;
}
.item {
flex-flow: column;
flex-shrink: 0;
width: 200px;
height: 100%;
margin-right: 20px;
}
.scroll .item .title {
position: sticky;
display: inline;
left: 0;
top: 0;
width: 100%;
height: 40px;
}
.item .content {
width: 100%;
height: 60px;
border: 3px solid green;
}
.item .content:first-child {
margin-top: 1rem;
}
<div class="scroll">
<div class="item">
<div class="title">
Title 1
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
Title 2
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="content">
Content
</div>
</div>
</div>

Display divs in the row on small screens

I am trying to display these divs with flex. But when the width of the screen gets less then approximately 500px I see only one div on the row. How to keep 2 divs on the row when the width of the screen gets less than it was before?
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.wrapper {
margin: 20px;
background: beige;
border-radius: 15px;
}
.divla{
margin: 15px;
}
#media(max-width:500px) {
.box{
width: 50%;
}
<div class="box">
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
</div> `
Please use nowrap instead of wrap in flex-wrap property.
.box {
display: flex;
flex-wrap: nowrap;
align-content: space-between;
}
You can also remove flex-wrap: nowrap; from the class as nowrap is set by default.
.box {
display: flex;
align-content: space-between;
}

How can i move a small text on 2 lines, without using 1 div only

How can I make "This text" to be on 2 lines, and center it next to the circle, also put the arrow between first and second circle
https://i.stack.imgur.com/2wfVy.png
<div className="steps">
<div className="circle">
<div className="step-number">{number}</div>
</div>
<div className="step-text">This text</div>
<div>{ shouldRenderArrow && <Icon className="arrow" name="ArrowDownward" /> }</div>
</div>
Some change require in your div and some styling need then you got.
.steps{
display: flex;
}
.circle {
border: 1px solid red;
border-radius: 50px;
float: left;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.step-text {
align-self: self-start;
justify-self: start;
flex-direction: column;
margin-left: 6px;
padding-top: 6px;
}
.arrow{
border: 1px solid;
width: 11px;
display: flex;
align-self: center;
justify-self: flex-end;
height:25px
}
.circle-arrow {
display: flex;
flex-direction: column;
}
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">1</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">2</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">3</div>
</div>
</div>
<div class="step-text">This text</div>
</div>

CSS : Fill available size with a scrollable pane in a fixed size container with header and footer

In my scenario I have a <div> element with a fixed position on the window which has the following css attributes:
position: fixed;
height: 80%;
width: 30%;
top: 50px;
left: 0;
My requirements are to be able to put an header and a footer in that <div>, and to fill the remaining space with an element which, if needed, has a scrollbar to scroll vertically through its content.
How can I do that in a way that is compatible with Chrome, Mozilla and Internet Explorer / Edge?
Using flexbox (might not work with percentile height and fixed position):
#wrapper {
display: flex;
flex-direction: column;
height: 100px;
width: 30%;
margin-top: 50px;
}
#content {
flex: 1;
overflow-y: scroll
}
<div id="wrapper">
<header>A header</header>
<div id="content">
yo<br /> <br /><br /> yo<br /><br /> <br /><br />yo<br /><br /><br /><br /><br /> <br /><br /> <br />yo
</div>
<footer>A footer</footer>
</div>
You can use overflow-y: auto to show a vertical scrollbar if necessary.
div{
overflow-y: auto;/*will show vertical scrollbar if necessary*/
}
.header{
position: absolute;
width: 100%;
height: 10%;
border: 1px solid blue;
}
.footer{
position: fixed;
width: 100%;
bottom: 5px;
width: 30%;
height: 10%;
border: 1px solid blue;
}
<div style="position: fixed; height: 80%; width: 30%; top: 50px; left: 0; border: 1px solid black;">
<div class="header">Header</div>
<p style="margin: 25px;"/>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<div class="footer">Footer</div>
</div>

Flexbox grow inside anchor

I'm facing a problem where I would like an anchor flexbox child to take all remaining height available. I thought that adding flex-grow: 1 would suffice but it is not working. The div inside the anchor does not take the full height.
Question: Is there a way to make it work without converting my plain anchor to a flexbox element?
Here is a codepen illustrating the issue:
https://codepen.io/alansouzati/pen/YVpYeO
I've created 3 tiles where the first one has the anchor to exemplify. You can see that the price does not align with the other siblings.
.plain is not a flex parent, so setting flex-grow: 1 on .service doesn't do anything.
Just add display: flex to .plain
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
display: flex;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>
See Below. I made the ".service" after the anchor tag absolute and relative to the main container. Hope it helps
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
position: relative;/**Added Code**/
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
}
/**Added Code**/
.plain > .service {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>

Categories

Resources