Add a box to the bottom right of the screen using CSS - html

I need to display a list of cards with maximize, minimize and close button to the bottom right of the screen. The cards should be displayed from bottom rigght to left. I am having trouble displaying to the bottom
Code that I tried
.card {
padding: 24px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
background: skyblue;
border-radius: 4px;
font-family: "Helvetica", sans-serif;
display: flex;
flex-direction: column;
height: 280px;
width: 160px;
}
.card-body {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
}
.card-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
}
<div class="card">
<div class="card-actions">
Close
</div>
<div class="card-body">
Card content
</div>
</div>

* {
box-sizing: border-box;
/* this is necessary, so we can't have the scrollbar appearing after setting the height of body*/
}
body {
margin: 0;
/* deleting the default margin in body (that create the bug of scrollbar appearing) */
}
.cards-container {
display: flex;
/* making element one near the other */
height: 100vh;
/* setting the height of div to device_height (so we can put them in the end of the page) */
align-items: flex-end;
/* aligning the cards to the end of the page */
justify-content: flex-end;
/* aligning the cards to the end of the page */
padding: 1rem;
/* adding some padding to the end of the page */
gap: 1rem;
/* adding some gap between the cards */
}
.card-actions {
display: flex;
/* making element one near the other */
gap: 1rem;
/* adding some gap between the icons */
position: absolute;
/* making the actions appear on the top of the card */
top: 0.5rem;
/* setting the top position of the actions to 0.5rem (so they are not overlapping with the card) */
right: 0.5rem;
/* setting the right position of the actions to 0.5rem (so they are not overlapping with the card) */
}
.card {
position: relative;
/* making the card relative so we can use position absolute in the childs (so we can put the actions on the top of the card) */
padding: 24px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
background: skyblue;
border-radius: 4px;
font-family: "Helvetica", sans-serif;
display: flex;
flex-direction: column;
height: 280px;
width: 160px;
}
.card-body {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
}
<head>
<!-- I used FONTAWESOME for the icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<div class="cards-container">
<!-- 1 -->
<div class="card">
<div class="card-actions">
<!-- minimize --><i class="fa-regular fa-square-minus"></i>
<!-- maximize --><i class="fa-regular fa-window-maximize"></i>
<!-- close btn--><i class="fa-regular fa-rectangle-xmark"></i>
</div>
<div class="card-body">Card content</div>
</div>
<!-- 2 -->
<div class="card">
<div class="card-actions">
<!-- minimize --><i class="fa-regular fa-square-minus"></i>
<!-- maximize --><i class="fa-regular fa-window-maximize"></i>
<!-- close btn--><i class="fa-regular fa-rectangle-xmark"></i>
</div>
<div class="card-body">Card content</div>
</div>
<!-- 3 -->
<div class="card">
<div class="card-actions">
<!-- minimize --><i class="fa-regular fa-square-minus"></i>
<!-- maximize --><i class="fa-regular fa-window-maximize"></i>
<!-- close btn--><i class="fa-regular fa-rectangle-xmark"></i>
</div>
<div class="card-body">Card content</div>
</div>
</div>
</body>

you can try using Position property.
For example your HTML content is in a parent div named mainBody
<div class="mainBody">
<div class="card">
<div class="card-actions">
Close
</div>
<div class="card-body">
Card content
</div>
</div>
</div>
So, you will have to give postion:relative; to the mainBody and then position:absolute; to the child elements and then use top, bottom, right, left properties to adjust the position.
.mainBody{
height: 100vh;
width: 100vw;
position:relative;
}
.card {
padding: 24px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
border-radius: 4px;
font-family: "Helvetica", sans-serif;
background: skyblue;
width:30%;
height:50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
position:absolute;
bottom:0;
right:0;
}
.card-body {
display: flex;
flex: 1 0 auto;
align-items: center;
justify-content: center;
}
.card-actions {
position:absolute;
top:0;
right:0;
}

You can try to do this, very simple and easy CSS.
position: fixed;
bottom: 0;
right: 0;
bottom and right attributes can be changed to suit your needs. Remember, think of these attributes as a margin for the element but doesn't effect other elements.
Thank you for considering my answer.

.main {
height: 100vh;
display: flex;
justify-content: end;
align-items: end;
}
.card {
padding: 24px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
background: skyblue;
border-radius: 4px;
font-family: "Helvetica", sans-serif;
display: flex;
flex-direction: column;
height: 280px;
width: 160px;
}
.card-body {
display: flex;
flex: 1 0 auto;
align-items: flex-end;
justify-content: center;
}
.card-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
}
<div class="main">
<div class="card">
<div class="card-actions">
Close
</div>
<div class="card-body">
Card content
</div>
</div>
</div>
You can also do this using flex property of css

Related

Why my Icons are getting extra height ? I have attached sandbox link at the bottom [duplicate]

This question already has answers here:
How to make a flex item not fill the height of the flex container? [duplicate]
(2 answers)
Closed 8 months ago.
I have a div which has height and width of 500px, inside this div I have 8 icons with font-size: 60px and margin: 0 30px, I have applied display flex to the div and justify-content: space-between, flex-wrap: wrap but my Icons are getting all the remaining height in the div.
<div id="container">
<nav id="navbar">
<a href="j" className="link">
Site Name
</a>
<a href="f">
<FaRegUserCircle className="user-icon" />
</a>
</nav>
{/* navbar above */}
<div id="playlist-container">
<div id="playlist">
<div className="icons">
<BsCloudRain />
</div>
<div className="icons">
<GiForest />
</div>
<div className="icons">
<MdOutlineWaterDrop />
</div>
<div className="icons">
<BiWind />
</div>
<div className="icons">
<GiCampfire />
</div>
<div className="icons">
<GiThreeLeaves />
</div>
<div className="icons">
<BsMoonStars />
</div>
<div className="icons">
<BiWater />
</div>
</div>
</div>
</div>
Css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
height: 100vh;
width: 100%;
background-color: rgb(10, 116, 80);
}
#navbar {
height: 76px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 0.5px 10px 1px rgb(32, 32, 32);
}
.link {
font-size: 30px;
margin-left: 30px;
}
.user-icon {
margin-right: 70px;
font-size: 30px;
}
a {
color: #fff;
text-decoration: none;
}
/* Navbar */
#playlist-container {
display: flex;
justify-content: center;
}
#playlist {
height: 500px;
width: 500px;
background-color: aquamarine;
margin: 80px auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.icons {
font-size: 60px;
margin: 0 30px;
}
Sandbox
The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis.
Add align-content: flex-start; to #playlist:
#playlist {
height: 500px;
width: 500px;
background-color: aquamarine;
margin: 80px auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: flex-start;
}

Align div at bottom of flex

I have this card:
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
}
.do_container {
padding: 2px 16px;
}
<div class="do_card">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<div class="do_container">
<p style="text-align: center;">Lorem Ipsum</p>
<div style="display: flex; justify-content: space-between;">
<p><i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
</div>
How can I get the "GET IT" and "Like" to always be at the bottom of the card?
Setting the do_card to position: relative; and the div with "Get it" and "Like"
to position: absoulute; bottom:0px; does not work
To make sure the content set to absolute remains within the desired element (card in your case), make sure to set its parent to position: relative; (.do_card in your case)
It does seem to work for me as mentioned in the comment:
<style>
.do_card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 220px;
height: 320px;
position: relative;
}
.do_container {
padding: 2px 16px;
}
</style>
<div class="do_card">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<div class="do_container">
<p style="text-align: center;">Lorem Ipsum</p>
<div style="display: flex; justify-content: space-between; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; padding: 0 16px; left: 0;">
<p><i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
</div>
I would prefer a "non-absolute" solution whenever possible. In fact, you're able to achieve the layout with flexbox. Here's how:
First, you need to put your content inside the card into 2 blocks (top and bottom).
Then, you can use flex-direction: column; and justify-content: space-between; on the card.
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
/* vertical stretched alignment */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.do_card img {
max-width: 100%;
}
.do_container {
padding: 2px 16px;
}
.do_container_bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="do_card">
<!-- top -->
<div class="do_container">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<p style="text-align: center;">Lorem Ipsum</p>
</div>
<!-- bottom -->
<div class="do_container_bottom">
<i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
if you want button "GET IT" and "Like" to always be at the bottom of the card, you can set do_container to flex_grow: 1 to make it take as much space as possible and set the element inside with justify-content: space-between
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
/* add flex */
display:flex;
flex-direction: column;
}
img {
width:220px;
height:150px;
margin-left:auto;
margin-right:auto;
display:block;
}
.do_container {
padding: 2px 16px;
/* add flex-grow to make it fill the height of the container */
flex-grow: 1;
display: flex;
flex-direction: column;
/* make it space-between to set get_it and like button on bottom of card */
justify-content: space-between;
}
.title {
text-align: center;
}
.action_container {
display: flex;
justify-content: space-between;
}
p {
color:black
}
<div class="do_card">
<img src="https://picsum.photos/200/300">
<div class="do_container">
<p class="title">Lorem Ipsum</p>
<div class="action_container">
<p><i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
</div>

Justify-content: space-between not applying on nested flex box

I am styling a cart in angular. I am trying to get the price to be all the way to the right of the cart however it is not applying.
I tried using space-between and I tested it on the outer div and it worked, but when I try to apply on the inner div it doesn't work. What am I missing or just plain not understanding here?
here is a pen of the code
https://codepen.io/awschneider-dev/pen/rNedLJg
HTML Below
<div class="container">
<h2>Cart</h2>
<div class="cartProducts" *ngFor="let item of items">
<!-- <input type="checkbox" name="deleteItem" id=""> -->
<hr>
<div class="item">
<div class="itemImage">
<img class="productImage" src="../../assets/images/phones/{{item.image}}" alt=""/>
</div>
<div class="information">
<div class="description">
Link to Item Page
</div>
<div class="price">
{{item.price | currency}}
</div>
</div>
</div>
</div>
</div>
CSS Below
div.item{
display: flex;
}
div.information{
display: flex;
justify-content: space-between;
flex-direction: row;
}
div.container{
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
div.itemImage{
min-width: 150px;
}
img.productImage{
max-width: 100px;
max-height: 150px;
margin: 10px;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 1.0em;
margin-right: 1.0em;
border-style: inset;
border-width: 1px;
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
a.fakeLink{
font-weight: 750;
font-size: larger;
text-decoration: none;
color: #0645AD;
}
Resources I accessed below.
How to fix flex box with justify-content space between
Justify-content: space-between works incorrect
Any and all help would be appreciated.
To make it work, you can set the width of div.information.
For example:
div.information{
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%; /* use any value you want */
}
Add the following property in your css rule:
div.information{
display: flex;
justify-content: space-between;
flex-direction: row;
flex-grow: 2; // add this line
}

Margin + ? = 100% width in flexbox

I have a flexbox with a width of 80vw and content inside of it align-items: center and justify-content: center. All the items in the column have 28px margin on either side. Right now, they are very skinny and only take up a part of the 80vw. Inspecting it shows a large amount of whitespace on either side.
I still want stuff like text centered, but things like a selection box should take up the full width of the container (including margins).
I've read a few things on here, and I've tried setting width: 100% but that not only disregards the centering css (pushes the item all the way to the left) but also disregards margins, and the margins spill over out of the width of the container.
Finally, I tried calc and calculated 80vw - 28px as the width of the inner content, but this did some weird stuff and only used half the margin, and the rest of it spilled out of the container.
.outerContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100vw;
height: 100vh;
background-color: black;
}
.modalContainer {
width: 80vw;
background-color: white;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.content1 {
margin: 20px 28px 10px 28px;
font-size: 27px;
line-height: 21px;
}
.content2 {
margin: 10px 28px 20px 28px;
}
<html>
<body>
<div class="outerContainer">
<div class="modalContainer">
<div class="content1">
Hello, World!
</div>
<div class="content2">
<input type="text" />
</div>
</div>
</div>
</body>
</html>
You can make the content divs 100% width minus margin by using the calc function (comments added to the lines I changed below):
.outerContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100vw;
height: 100vh;
background-color: black;
}
.modalContainer {
width: 80vw;
background-color: white;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.content1 {
margin: 20px 28px 10px 28px;
font-size: 27px;
line-height: 21px;
}
.content2 {
margin: 10px 28px 20px 28px;
width: calc(100% - 56px); /* 100% width minus 28px x 2 */
}
.content2 > input {
width:100%; /* make input stretch full width */
}
<html>
<body>
<div class="outerContainer">
<div class="modalContainer">
<div class="content1">
Hello, World!
</div>
<div class="content2">
<input type="text" />
</div>
</div>
</div>
</body>
</html>

Flexbox center and bottom right item

I'm trying to achieve the following result using flexbox:
I tried the with the following html but I can't get it to work.
<div class=" flex-center">
<div class="flex-item-center">
<p>
Some text in box A
</p>
</div>
<div class="flex-item-bottom">
<p>Some text in box B....</p>
</div>
</div>
CSS:
.flex-center {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.flex-item-center {
align-self: center;
}
.flex-item-bottom {
align-self: flex-end;
}
How can I make it look like the image?
I've made a posible solution.
.flex-center {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
height: 400px;
}
.flex-center-bottom {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
align-items: center;
}
.flex-item-center {
border: solid 2px #4675AA;
order: 0;
flex: 0 1 auto;
align-self: center;
}
.flex-item-bottom {
border: solid 2px #4675AA;
order: 1;
flex: 0 1 auto;
align-self: flex-end;
}
<div class="flex-center">
<div class="flex-item-center">
<p>DROP FILES HERE</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Hint: You can also drop files in the all files page</p>
</div>
</div>
Update 2017: Tested in Google Chrome VersiĆ³n 62.0.3202.89 (Build oficial) (32 bits).
.flex-center,
.flex-center-bottom {
align-items: center;
background-color: #739FD0;
color: #000000;
display: flex;
}
.flex-center {
height: 400px;
justify-content: center;
}
.flex-center-bottom {
justify-content: flex-end;
}
.flex-item-center {
border: solid 2px #4675AA;
font-family: Arial, sans-serif;
font-size: 1.6em;
line-height: 1px;
padding: 0 3px;
}
<div class="flex-center">
<div class="flex-item-center">
<p>Some text in box A</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Some text in box B...</p>
</div>
</div>
I hope this helps you.
Is this what you are looking for? http://jsfiddle.net/DIRTY_SMITH/q12bh4se/6/
body {
background-color: lightblue;
}
#main {
width: 100%;
height: 400px;
border: 1px solid black;
display: -webkit-flex;
/* Safari */
-webkit-align-items: flex-start;
/* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#main div {
-webkit-flex: 1;
/* Safari 6.1+ */
flex: 1;
}
.flex-item-center {
margin-left: 40%;
border-style: solid;
-webkit-align-self: center;
/* Safari 7.0+ */
align-self: center;
}
.flex-item-bottom {
border-style: solid;
align-self: flex-end;
}
Try:
#main-wrapper {
background: blue;
width: 100%;
height: 100%;
min-height: 300px;
display: flex;
align-items: center;
}
.x-center {
display: flex;
justify-content: center;
}
.y-center {
flex: 1;
}
.x-right {
justify-content: flex-end;
}
.y-bottom {
align-self: flex-end;
}
.small-div {
padding: 10px;
}
<div id="main-wrapper">
<div class="x-center y-center small-div">Center center</div>
<div class="x-right y-bottom small-div">Bottom Right</div>
</div>
Notes:
The align-self won't work for IE10 or below.
Anybody know how to make the center div a bit more to the left without position relativing it? Thanks
In Bootstrap 4.x you can use the utility classes
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end h-100">
<div class="d-flex align-items-end">right bottom</div>
</div>
</div>
</div>
</div>
EDIT
Since I received a couple downvotes I believe a review is in order.
To me the above answer is still valid, however I understand it's not clear it requires some height.
How this height is achieved doesn't really matter. Either you set it fixed in CSS on a wrapper or for the code snippet's sake we set the document's height to make it responsive.
If the "center content" takes up the space in height, the "bottom content" can be positioned absolute, so it doesn't add height. All what's left is to make sure it covers the full width and positions from the bottom.
html, body { height: 100%; } /* can be anything that generates height */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end position-absolute w-100 fixed-bottom">
<div class="d-flex align-items-end">right bottom</div>
</div>
So functionality wise, there's no additional CSS required in Bootstrap.
Documentation justify content
Documentation position