Here is my codepen with the problem : http://codepen.io/Golgota/pen/gwvGGj
And my CSS :
.bloc {
background-color:white;
float:left;
width:100%;
margin: 10px;
padding: 10px;
height: 500px;
}
img {
max-width:100%;
max-height:100%;
}
#media all and (min-width: 40em) {
.bloc {
float: left;
width: 31%;
margin: 10px;
height: 500px;
}
}
I have 3 responsive div .bloc I would like to keep them at the same height. The problem comes from the images which have different sizes.
Is there a way to have 3 .bloc with the same height without changing the images' resolutions or scrolling ?
Cheers !
/* item styles */
.item-image {
position: relative;
overflow: hidden;
padding-bottom: 50%;
border: 1px solid #ddd;
}
.item-image img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.item-content {
padding: 15px;
background: #72cffa;
}
.item-text {
position: relative;
overflow: hidden;
height: 100px;
}
/* centering styles for jsbin */
html,
body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css aspect ratio to have images of same height</title>
<meta name="description" content="Css aspect ratio to have images of same height">
<!-- include bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="item-image">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="item-image">
<img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="item-image">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec velit nulla. Cras finibus mollis dolor, ac rhoncus diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin gravida iaculis orci eget malesuada. Morbi pulvinar, purus sit amet porta laoreet, quam orci fermentum leo, in interdum ligula elit id magna. Nam justo massa, ultrices eget dictum vitae, porttitor eget eros.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you can use the object fit, but check the support first,
you can do this,
body {
background-color: orange;
padding: 5%;
margin: auto;
box-sizing: border-box;
}
.block-holder .bloc {
background-color: white;
float: left;
width: 32.66%;
padding: 10px;
height: 100%;
margin: 0;
}
.block-holder .bloc:not(:first-child):not(:last-child){
margin: 0 1%;
}
img {
width: 100%;
height: 50vh;
object-fit: cover;
}
*, *:before, *:after {
box-sizing: border-box;
}
<div class="block-holder">
<div class="bloc">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" />
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" />
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
</div>
Try this. I just changed the image min-height into pixels rather than %.
body {
background-color:orange;
padding: 5%;
margin:auto;
}
.bloc {
background-color:white;
float:left;
width:100%;
margin: 10px;
padding: 10px;
height: 500px;
}
img {
max-width:100%;
min-height: 270px;
}
#media all and (min-width: 40em) {
.bloc {
float: left;
width: 31%;
margin: 10px;
height: 500px;
}
}
<div class="bloc">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg"/>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"/>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
Related
I'm trying to resize my grid cells to fit their contents but when i gave them heigh induvidually it distored the whol layout. I have a grid container that has two container inside. the first one is a grid container and the second one is a flex box
take a look at my css maybe I got the layout wrong `.
mycontainer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px;
}
.mycontainer > div {
background-color: gray;
border: 1px red solid;
}
.boxe1 {
grid-column: 1 / span 2;
}
.seconContainer > div {
background-color: gray;
border: 1px red solid;
}
.boxe1 {
height: 435px;
}
.boxe5 {
height: 535px;
}
.seconContainer {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
}
.bigcontainer {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 25px;
}
#media only screen and (max-width: 800px) {
.bigcontainer {
background-color: blue;
display: flex;
flex-direction: column;
}
}
here is my HTML
<div class="bigcontainer">
<div class="mycontainer">
<div class="boxe1">
<p><br/></p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p><p><br/></p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p><p><br/></p>
</div>
<div class="boxe2">
<img src="textimages/box3.jpg" alt="" class="img-fluid"/>
</div>
<div class="boxe3">
<img src="textimages/box3.jpg" alt="" class="img-fluid"/>
</div>
</div>
<div class="seconContainer">
<div class="boxe4">
<img src="textimages/box4.jpg" alt="" class="img-fluid" />
</div>
<div class="boxe5">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p><p><br/></p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p><p><br/></p>
</div>
</div>
`
this is what I'm trying to achieve
This might help you and i used sample images
I used flex box for responsive instead of grid.
* {
box-sizing: border-box;
}
body{
overflow:hidden;
overflow-y:scroll;
}
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
height: 100vh;
font-family: 'sans';
}
.bigcontainer::after {
content: '';
background: #f6f2ea;
width: 60%;
height: inherit;
position: absolute;
z-index: -1;
right: 0;
}
.bigcontainer > div {
width: 50%;
height: 50%;
padding: 15px;
}
.box2 img {
width: 100%;
height: 100%;
border-radius: 5px;
}
.box3 {
display: flex;
gap: 10px;
}
.box3 img {
width: 50%;
border-radius: 5px;
}
#media screen and (max-width: 768px) {
.bigcontainer > div {
width:100%;
height: max-content;
flex: 0 0 100%;
}
.box2 {
order: 4
}
.box3 {
flex-wrap: wrap;
}
.box3 img {
width: 100%;
}
.bigcontainer::after {
display: none;
}
}
<div class="bigcontainer">
<div class="box1">
<h2>Title</h2>
<p>Lorem apsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p>
</div>
<div class="box2">
<img src="https://static.asianpaints.com/content/dam/sleek/kitchen-landing/TheRomantic%20Inspiration.jpg" alt="" class="img-fluid" />
</div>
<div class="box3">
<img src="https://cdn.onekindesign.com/wp-content/uploads/2013/09/Small-Kitchen-Ideas-01-1-Kindesign.jpg" alt="" class="img-fluid"/>
<img src="https://cdn.onekindesign.com/wp-content/uploads/2013/09/Small-Kitchen-Ideas-01-1-Kindesign.jpg" alt="" class="img-fluid"/>
</div>
<div class="box4">
<h2>Title</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br/>
Aliquid sit provident doloremque vitae deserunt<br/> rerum placeat
neque tenetur, atque
unde. Dolores consectetur,<br/> assumenda animi aliquid incidunt
enim nam natus sunt.</p>
</div>
In my react and tailwindcss project I have the following code snippet in one of components:
<div className="container">
<div className="grid grid-cols-4 gap-x-2 gap-y-4">
{valueCards.map(
(item,index) => (
<div key={index}>
<ValuesCard description={item.description} isPrimary={index % 2 === 0} />
</div>
)
)}
</div>
</div>
This will produce the following results:
What I'm looking for is first of all to try to make all excess divs appear in the middle of the row like this (note that i don't mind doing it with plain css instead of tailwindcss):
I would also prefer that all the cards have the same height equal to the height of the largest card amongst them all even if that one wasn't on the same row.
The problem with your code is that you are setting the number of columns to 4 while on the second row you only want 3. In a grid the number of columns stays the same. Therefore it might be easier to use flexbox to get the solution you want. So instead of 'display: grid', I would use 'display: flex'.
Instead of setting a fixed number of columns, you might want to specify the maximum width of your cards and let the browser decide how many cards it can fit into one row.
By setting 'flex-wrap: wrap' you're telling the browser that it can start placing cards on a new row if the first one is full. By setting justify-'content: center' the cards will be horizontally centered in their flex-container.
By choosing the max-width of the cards, you can determine how many you want to be grouped into one row. You could also specify a height for the cards to make sure that they have the same height and set overflow: scroll in case the content is longer than what fits in the card.
Here's an example in plain CSS that I've tried to make as simple as possible:
.flex-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.card {
background-color: lightgray;
padding: 0.5rem;
max-width: 20%;
}
<div class="flex-container">
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
eaque molestiae esse autem.
</div>
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
eaque molestiae esse autem.
</div>
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
eaque molestiae esse autem.
</div>
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
eaque molestiae esse autem.
</div>
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
eaque molestiae esse autem.
</div>
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
eaque molestiae esse autem.
</div>
<div class="card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae
molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima
eaque molestiae esse autem.
</div>
It seems that it is not possible to do it with CSS grids.
This is because grid algorithm makes sure that the elements follow the grid lines for their sizes.
An easier solution is to use CSS flex box and use justify-content: center
I have tried doing the same here in this code pen
Check out what I did. It is HTML and plain CSS. Adjust the width and height as necessary. The fundamental is to put the top and lower grids in different DIV's, then center each of the two DIV's.
body{
margin: 0;
}
.container {
background-color: blue;
height: auto;
padding: 10px; /*You may want to increase this*/
}
.top-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
width: fit-content;
margin: 1.5rem auto;
column-gap: 1rem;
}
.bottom-grid{
margin: 1.5rem auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
width: fit-content;
column-gap: 1rem;
}
/*Resixe this as necessary*/
.grid-div{
display: block;
border: 1px solid none;
width: 110px;
height: 120px;
background-color: white;
}
/*Check here 1st if you face a problem*/
.grid-div .inner{
margin-bottom: 8px;
padding: 5px;
}
.grid-div span{
display: block;
text-align: center;
}
.grid-div span:nth-of-type(2){
margin-top: 1rem;
}
.color-block{
background-color: red;
height: 1rem;
width: 100%;
margin: 0;
}
.material-icon-blue{
color: blue;
}
.material-icon-black{
color: black;
}
<head>
<!--add material icon link here-->
<!--Example-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Connect HTML to CSS-->
<!--Check the web if you don't know how. This also applies to adding the specific material icon into the HTML-->
</head>
<section class="container">
<div class="top-grid">
<div class="grid-div">
<div class="inner">
<span class="material-icon-black">Add Material Icon Here</span>
<span>Add text content here</span>
</div>
<div class="color-block"></div>
</div>
<div class="grid-div">
<div class="inner">
<span class="material-icon-blue">Add Material Icon Here</span>
<span>Add text content here</span>
</div>
<div class="color-block"></div>
</div>
<div class="grid-div">
<div class="inner">
<span class="material-icon-black">Add Material Icon Here</span>
<span>Add text content here</span>
</div>
<div class="color-block"></div>
</div>
<div class="grid-div">
<div class="inner">
<span class="material-icon-blue">Add Material Icon Here</span>
<span>Add text content here</span>
</div>
<div class="color-block"></div>
</div>
</div>
<div class="bottom-grid">
<div class="grid-div">
<div class="inner">
<span class="material-icon-black">Add Material Icon Here</span>
<span>Add text content here</span>
</div>
<div class="color-block"></div>
</div>
<div class="grid-div">
<div class="inner">
<span class="material-icon-blue">Add Material Icon Here</span>
<span>Add text content here</span>
</div>
<div class="color-block"></div>
</div>
<div class="grid-div">
<div class="inner">
<span class="material-icon-black">Add Material Icon Here</span>
<span>Add text content here</span>
</div>
<div class="color-block"></div>
</div>
</div>
</section>
You can use flex.
.wrapper {
margin: 0 auto;
max-width: 800px;
}
.cards {
list-style: none;
margin: 0;
padding: 0;
}
.cards li {
border: 2px solid #490A3D;
border-radius:5px;
background-color: #BD1550;
color: #fff;
width: 30%;
}
.cards h2 {
background-color: #490A3D;
margin: 0;
padding: 10px;
}
.cards p {
padding: 10px;
}
.flex {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
justify-content:center
}
.flex li {
margin: 10px;
}
<div class="wrapper">
<h1>Flexbox</h1>
<ul class="flex cards">
<li><h2>Card 1</h2>
<p>Posuere varius
</p></li>
<li><h2>Card 2</h2>
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis.
</p></li>
<li><h2>Card 3</h2>
<p>Posuere varius ullamcorper ipsum ipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p></li>
<li><h2>Card 4</h2>
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
</p></li>
<li><h2>Card 5</h2>
<p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing
</p></li>
</ul>
</div>
I am trying to learn some React and CSS and I am struggling with one thing.
I am trying to create a chat page , but when there are many messages , the message - container pushes down the input box.
React code:
const message = useRef()
function submit(e) {
e.preventDefault();
addMessage(msgBox => [...msgBox , message.current.value])
}
const [msgBox, addMessage] = useState(["John: Hi"])
return (
<>
<div className = "chat-container">
{msgBox.map((msg) => {
return <div><span>{msg}</span><br/></div>
})}
</div>
<div className = "message-box">
<Form onSubmit = {submit}>
<input ref = {message} />
<Button type = "submit" className = "mb-1 position-fixed">
Send
</Button>
</Form>
</div>
</>
)
CSS :
* {
margin: 0;
padding: 0;
}
.chat-container {
min-height: 90vh;
min-width: 80%;
position: relative;
}
span {
padding: 60px;
}
.message-box {
min-height: 10vh;
position: absolute;
}
.message-box > form > input {
margin-left: 60px;
}
I tried to play around with the position properties, but I coudn't make it happen.I want the message-box to not be pushed down by chat-container when there are too many messages.
I want when there are too many messages the chat-container not to overlap at all the message-box and be able to scroll there.
Any help?
Set max-height on .chat-container. You can use another value instead of 500px. Play with it to find a value that matches your design.
.chat-container {
max-height: 500px
overflow: scroll
}
Update
If the height of the .chat-container changes and you want to push the input at the bottom, do this:
Give all the parent of the .chat-container including html and body height: 100%.
Put the .chat-container and form in a html element that is flex and its flex-direction is column.
Use flex-grow: 1 on the .chat-container so that it always takes all the available space.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-container {
flex-grow: 1;
overflow: scroll;
}
<div class="container">
<div class="chat-container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus expedita reiciendis, magnam provident fugit ad odit, nulla a nisi repellat eaque minus assumenda neque ea cumque blanditiis nobis repudiandae? Aliquid.</p>
</div>
<div class="message-box">
<Form onSubmit={ submit}>
<input ref={ message} />
<Button type="submit" class="mb-1 position-fixed">
Send
</Button>
</Form>
</div>
</div>
You can adjust the height of the form.
I just want to add a bit more to the solution, as the previous answers are quite poor, since whenever the viewport changes, the 500px value would not work. In this app case, we have:
The container with the chat messages, which should be scrollable and should have a fixed height.
The container with the input which would have the rest of the height.
I suppose you are designing an app like WhatsApp Web, so you would have something like the following:
Here is how the structure would look in HTML:
<div class="chat-wrapper">
<div class="chat-messages">
<div class="message left">Some text</div>
<div class="message left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla sem, placerat a est eu, interdum consectetur ipsum. Sed sed libero ac mauris scelerisque convallis et eget elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel iaculis purus. Nunc placerat nisi sapien, id facilisis sapien faucibus sit amet. Vestibulum felis eros, fermentum quis augue eu, vehicula dapibus nisi. Suspendisse potenti.</div>
<div class="message right">Some text</div>
<div class="message right">Some text</div>
<div class="message left">Some text</div>
<div class="message right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla sem, placerat a est eu, interdum consectetur ipsum. Sed sed libero ac mauris scelerisque convallis et eget elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel iaculis purus. Nunc placerat nisi sapien, id facilisis sapien faucibus sit amet. Vestibulum felis eros, fermentum quis augue eu, vehicula dapibus nisi. Suspendisse potenti.</div>
<div class="message left">Some text</div>
<div class="message right">Some text</div>
<div class="message right">Some text</div>
<div class="message left">Some text</div>
</div>
<div class="chat-input">
<input name="message" class="chat-input" />
</div>
</div>
Now, the window height would be the 100% of the height, which is the same as 100vh. From here, you can create a parent container, whose height would be the entire viewport:
.chat-wrapper {
height: 100vh;
width: 50%;
margin: auto;
}
The chat wrapper would be the class for the parent of the div containers of the messages. Then, we would define two more classes, that will be the containers for the div's of the messages and the input itself:
/* Container for the message */
.chat-messages {
padding: 16px 36px 0;
min-height: calc(100% - 75px);
max-height: calc(100% - 75px);
overflow: auto;
}
/* Container for the input */
.chat-input {
background-color: #efefef;
min-height: 75px;
max-height: 75px;
display: flex;
justify-content: flex-left;
align-items: center;
padding: 0 32px;
}
The trick here, is how we calculate the height of the messages. As you can see, we are using the 100% of the height, but we are also subtracting the fixed height of the input container. Therefore, the messages container will always push the input container to the bottom, without removing it from the actual viewport. Plus, we add the overflow: auto prop, which will allow the scrolling inside the container.
Finally, we can add other styling classes to the other fields.
/* Default styling for the messages */
.message {
padding: 8px;
border-radius: 8px;
width: fit-content;
max-width: 65%;
margin-bottom: 8px;
border: 1px solid #dedede;
}
/* Default styling for the right messages */
/* You could also modify the styled for the left messages with the left class */
.message.right {
background-color: #dcf8c6;
margin-left: auto;
}
.chat-input {
padding: 8px;
width: 100%;
height: 65%;
border-radius: 8px;
outline: none;
border: none;
}
I am trying to add a 10px margin between the boxes and retain their intended media query values. But when it's added, the third box is pushed to the second row, I believe it is adding more pixels to the width of the box but I don't know how to make it scale automatically.
* {
box-sizing: border-box;
}
.titles {
float:right;
border-left: solid;
border-bottom: solid;
padding: 5px 10px 5px 10px;
}
.borders {
border-style: solid;
float: left;
}
p {
margin:15px;
margin-top:35px;
}
#media (min-width: 992px) {
.p1 {
width:33.33%;
}
.p2 {
width:33.33%;
}
.p3 {
width:33.33%;
}
}
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name ="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="module2.css">
<title>Module2-Solution</title>
</head>
<body>
<h1>Module 2 Assignment</h1>
<div class="p1 borders">
<div class="titles">One</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p2 borders">
<div class="titles">Two</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p3 borders">
<div class="titles">Three</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
</body>
</html>
Assuming that you want some space between the boxes on a wide screen, all you need to do is decrease their widths a bit.
* {
box-sizing: border-box;
}
.titles {
float: right;
border-left: solid;
border-bottom: solid;
padding: 5px 10px 5px 10px;
}
.borders {
border-style: solid;
float: left;
}
p {
margin: 15px;
margin-top: 35px;
}
#media (min-width: 992px) {
.p1 {
width: calc(33.33% - 7px);
}
.p2 {
width: calc(33.33% - 7px);
margin: 0 10px;
}
.p3 {
width: calc(33.33% - 7px);
}
}
<h1>Module 2 Assignment</h1>
<div class="p1 borders">
<div class="titles">One</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p2 borders">
<div class="titles">Two</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
<div class="p3 borders">
<div class="titles">Three</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.</p>
</div>
But it could be I'm misunderstanding your question; if so, let me know!
I need to display a collection of tiles (laid out using flexbox), where each tile has an "expando" child that - on hover - is supposed to expand beyond the parent limit. This part works, except for z-index. This doesn't surprise me after all, as every tile make its own z-index stacking context. I am just lost of ideas how to solve it.
I would really need to make these tiles and their children self-contained (to be later extracted into an angular component).
HTML
<div class="row">
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
</div>
CSS
.row {
display: flex;
padding: 3em;
}
.holder {
position: relative;
height: 100px;
width: 100px;
background: red;
margin-right: 30px;
z-index: 1;
}
.plate {
display: none;
border: 1px solid limegreen;
background: rgba(255, 255, 255, 0.6);
width: 190px;
color: green;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
padding: 1em;
box-sizing: border-box;
z-index: 1000;
}
.holder:hover .plate {
display: flex;
}
jsfiddle
You have to set z-index on .holder:hover.
.holder:hover {
z-index:10;
}
https://jsfiddle.net/hk149512/3/
You may need to change the z-index for the holder element on :hover, just add to your code:
.holder:hover {
z-index:10
}
.row {
display: flex;
padding: 3em;
}
.holder {
position: relative;
height: 100px;
width: 100px;
background: red;
margin-right: 30px;
z-index: 1;
}
.plate {
display: none;
border: 1px solid limegreen;
background: rgba(255, 255, 255, 0.6);
width: 190px;
color: green;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
padding: 1em;
box-sizing: border-box;
z-index: 1000;
}
.holder:hover {
z-index:10
}
.holder:hover .plate {
display: flex;
}
<div class="row">
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
</div>