Needing some help with CSS flexbox today. I believe I've configured flexbox right, I want each list item to stack, and then each div in the li to perform a space-between and have the content centered vertically in each div. This is to serve in an auto-complete.. How it is actually displaying though is: (not seeming to honour a height setting)
I have created a code snippet, code simplified from angular.io removed for sake of example. The isolated code snippet appears to work fine! Can you guys see anything else that could be causing an issue?
ul.search-result {
margin-top: 4px;
padding-left: 0;
outline: 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
position: absolute;
background: white;
z-index: 99;
display: none;
//width: 355px;
//height: 300px;
overflow: auto;
display: flex;
flex-direction: column;
}
li {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 60px;//60px;
padding: 10px;
background-color: #E9EDEF;
cursor: pointer;
list-style-type: none;
border: solid 1px red;
}
<ul class="search-result" style="width:500px;max-height:500px;">
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
<li>
<div class="icon">
image
</div>
<div class="title">
<div class="name">name</div>
<div class="location">location</div>
</div>
<div class="status">
status
</div>
</li>
</ul>
In the end, I simply re-jigged all my CSS and html to follow this approach I mentioned in my final comment on the question.
Thanks for the trouble.
Related
I am still learning CSS and HTML. So please excuse me if this is a silly question.
Please see my code below. I need help with aligning the blue buttons on both the cards. It should be on the bottom of the cards (aligned similarly) regardless of content size.
Please advise.
.row {
display: flex;
/* equal height of the children */
}
.col1 {
flex: 1;
/* additionally, equal width */
border: 1px solid #dadada;
margin: 0 40px 0 0;
padding: 0 0 10px 0;
}
.col2 {
flex: 1;
/* additionally, equal width */
border: 1px solid #dadada;
padding: 0 0 10px 0;
}
.card-header {
background: rgba(242, 242, 242, 1);
text-align: left;
font-size: 12px;
font-weight: 600;
padding: 31px 10px 31px 15px;
}
.card-header-bg {
height: 7px;
}
.card-container {
padding: 2px 14px;
}
.blue-button,
a.blue-button {
background-color: #026fc2;
border-radius: 99rem;
box-shadow: inset 0 0 0 1px #454545;
color: #fff;
text-decoration: none;
font-weight: 600;
padding: 0.5rem 1rem;
text-align: center;
display: inline-block;
}
<div class="row">
<div class="col1">
<div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>
<div class="card-header">Header</div>
<div class="card-container">
<p>Test Example</p>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<p>Minor updates.</p>
<ul>
<li>test</li>
<li>Test</li>
</ul>
<p>Go Here</p>
</div>
</div>
<div class="col2">
<div class="card-header-bg" style=" background-color: #7ECEFD;"></div>
<div class="card-header">Header</div>
<div class="card-container">
<p>test123/p>
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
<p>test test test.</p>
<ul>
<li>Learn about testing</li>
</ul>
<p>Second Test</p>
</div>
</div>
</div>
Not a silly question. They seem unaligned because there are more li's on the left side. Buttons are positioned statically by default, so if there is more content, it will be pushed down. You'll notice if you add more li's on the right side, the button will be pushed down and seem aligned. You may find nesting the buttons in their own divs will give you more control.
However, you can easily resolve this with your current structure by adding <br> or the line-break element on the button that is positioned higher. See below.
.row {
display: flex;
/* equal height of the children */
}
.col1 {
flex: 1;
/* additionally, equal width */
border: 1px solid #dadada;
margin: 0 40px 0 0;
padding: 0 0 10px 0;
}
.col2 {
flex: 1;
/* additionally, equal width */
border: 1px solid #dadada;
padding: 0 0 10px 0;
}
.card-header {
background: rgba(242, 242, 242, 1);
text-align: left;
font-size: 12px;
font-weight: 600;
padding: 31px 10px 31px 15px;
}
.card-header-bg {
height: 7px;
}
.card-container {
padding: 2px 14px;
display: flex;
flex-direction: column;
justify-content: center;
}
.blue-button,
a.blue-button {
background-color: #026fc2;
border-radius: 99rem;
box-shadow: inset 0 0 0 1px #454545;
color: #fff;
text-decoration: none;
font-weight: 600;
padding: 0.5rem 1rem;
text-align: center;
display: inline-block;
}
.btn-primary {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px;
}
.card-container>div {
height: 210px;
}
<div class="row">
<div class="col1">
<div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>
<div class="card-header">Header</div>
<div class="card-container">
<div>
<p>Test Example</p>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<p>Minor updates.</p>
<ul>
<li>test</li>
<li>Test</li>
</ul>
</div>
</div>
<div class="btn-primary">
Go Here
</div>
</div>
<div class="col2">
<div class="card-header-bg" style=" background-color: #7ECEFD;"></div>
<div class="card-header">Header</div>
<div class="card-container">
<div>
<p>test123</p>
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
<p>test test test.</p>
<ul>
<li>Learn about testing</li>
</ul>
</div>
</div>
<div class="btn-primary">
Second Test
</div>
</div>
Largest rendered height at default ~ makes height for both divs.
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top:50%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
I am using here bootstrap 4.3.1 with flex concept with some custom pieces of CSS. Here the status-light and other div items are not proper center horizontally, how am I doing center horizontally?
Note: Don't want a solution by adding custom top property value (Ex. top:58%; or top:58px;), I need a proper logical solution.
You might use vertical translation to bring it up in line with the text elements. Notice that I stripped out the span and paragraph elements which don't seem to be doing anything.
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
transform: translateY(-50%);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>1</div>
<div>Company Name</div>
<div>Job Applied For</div>
<div>Status</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
You can give the p the same line-height as the container - here I added some borders and padding just to be painfully obvious what is where.
I also made some p into a div because that seems "cleaner" given your requirement.
.job-list-view-section {
border: 2px blue solid;
padding: 0.25rem;
}
.job-list-view-section .col-12 {
border: 1px red solid;
padding: 0.25rem;
}
.job-list-view-section .col-12 .d-flex {
padding: 0.25rem;
}
.job-list-view-section .col-12 .my-shadow>* {
border: 1px green solid;
display: flex;
align-items: center;
justify-content: center;
height:3rem;
}
.job-list-view-section .col-12 .my-shadow>*>p {
background-color: #ddffdd;
display: inline-block;
align-self: flex-start;
line-height: 2.9rem; /*match to align text in the p to the green box, less than 3 for the borders */
}
.wrap-things {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border: solid 1px lime;
align-self: center;
}
.status-light {
border: solid 1px lime;
height: 0.5rem;
width: 0.5rem;
}
.status-light-red::before {
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before {
content: "";
border-radius: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<div>Company Name</div>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<div>status</div>
</div>
<div class="wrap-things">
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
</div>
See, borders:
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top:50%;
}
.my-shadow >div{border: solid 1px red;}
.my-shadow >div>p{border: solid 1px lime;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
Remove the padding from <p>.
Also, to align the red dot add top: calc(50% - 5px); to ::before.
See MDN calc.
.status-light-red::before{
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
top: calc(50% - 5px);
}
.job-list-view-section p{
margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
also, you could try displaying the parent flex like
.status-light-red::before {
background-color: rgb(255, 0, 0);
box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
-moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light{
display: flex;
align-items: center;
justify-content: center;
}
.status-light::before{
content: "";
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
/*top pos removed*/
}
.job-list-view-section p {
margin-bottom: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
<div class="row job-list-view-section">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
<div>
<span>1</span>
</div>
<div>
<p>Company Name</p>
</div>
<div>
<p>Applied Job For</p>
</div>
<div>
<p>status</p>
</div>
<div class="status-light status-light-red"></div>
</div>
</div>
</div>
</div>
I am trying to create 3 cards that stand at the bottom of the webpage but the 3 cards are overlapping. Can you help me find my mistake please? :)
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
height: 455px;
cursor: pointer;
position: absolute;
margin-left: 4%;
bottom: 10px;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
The problem was caused by the position: absolute; style in your CSS. Basically, you set all 3 cards to the same position which is why they overlapped.
I also changed your card's height to min-height. This is because the text was flowing out of the card and min-height would prevent this.
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
min-height: 455px;
cursor: pointer;
margin-left: 4%;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
remove "position: absolute" and things would work fine. Or if you're trying to display somethign else?
I have little issue with Flex wrap, my code is like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="box">
<div id="mr">
<div class="item " id="1">1</div>
<div class="item " id="2">2</div>
<div class="item " id="3">3</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And CSS
.item {
height: 50px;
width: 50px;
border-radius: 1rem;
margin: 1rem .5rem;
background: #53d5bb;
color: rgba(255, 255, 255, 0.45);
-webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
text-align: center;
line-height: 50px;
font-size: 1rem;
}
#mr {
display: flex;
flex-wrap: wrap-reverse;
}
.box {
height: 400px;
}
What am I doing wrong? Can this be up to Bulma CSS or I miss something? Why this class flex-wrap: wrap-reverse; doesn't work? Also, here is my fiddle https://jsfiddle.net/kv3gfs4r/1/
It works. When you resizes the window and container is not fully visible it works as it should. I would say it starts from bottom and wrap to the top so when wrap is needed it just writes from the bottom to top.
there is of course flex-direction: row-reverse that that would reverse the order of every element.
Please refer to what do you want to accomplish.
As the title suggest i want to make cards go from left to right instead of vertically i really dont know what to do and I have tried everything including float left
The code below is of one card. they are all the same with different text
and here is a screenshot of what it looks like
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card {
box-sizing: content-box
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}
.container {
padding: 2px 16px;
}
.card {
display: inline;
}
.card {
float: inline-start;
}
<div class="card">
<img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
<section id="text">
<div class="container">
<h4><b>New smash bros. game.</b></h4>
<p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
</section>
</div>
</div>
</div>
Flex makes it very easy to do. Wrap it in a container and set the flex-direction to row.
.cards {
display: flex;
flex-direction: row;
}
.card {
display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card {
box-sizing: content-box;
margin: 10px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}
.container {
padding: 2px 16px;
}
<div class="cards">
<div class="card">
<img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
<section id="text">
<div class="container">
<h4><b>New smash bros. game.</b></h4>
<p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
</div>
</section>
</div>
<div class="card">
<img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
<section id="text">
<div class="container">
<h4><b>New smash bros. game.</b></h4>
<p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
</div>
</section>
</div>
</div>
wrap your cards in a div and set the div to
here is an example:
.wrap {
display: flex;
justify-content: space-between;`
}
<div class="wrap">
<div class="card">
card content
</div>
<div class="card">
card content
</div>
<div class="card">
card content
</div>
</div>