Trying to place a button into flex container and make its height to be percentage of sibling's (.task) height. It works as expected except that button horizontally overflows parent (.task-buttons) and ancestor (.task). I have no idea why it happens.
I'd like .task-buttons to have the same width as its content and fit into .task, shrinkin .task-todo if needed. Exactly .task-todo as its parent (.task-info) may contain additional items that shouldn't be shrunk.
*,
::before,
::after {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 22px;
}
.container {
position: relative;
left: 30%;
top: 50px;
width: 40%;
padding: 8px 16px;
border-radius: 30px;
box-shadow: 0px 1px 4px #00000029;
}
.task {
display: flex;
justify-content: space-between;
width: 100%;
}
.task-info {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
}
.task-todo {
overflow: hidden;
text-overflow: ellipsis;
}
.task-buttons {
display: flex;
align-items: center;
position: relative;
}
.task-inc-button {
font-size: 18px;
color: white;
height: 80%;
aspect-ratio: 1;
border: none;
border-radius: 50%;
background-color: #9BE0DB;
cursor: pointer;
}
<div class="container">
<div class="task">
<div class="task-info">
<div class="task-todo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis magna a sem posuere vestibulum.</div>
</div>
<div class="task-buttons">
<button type="button" class="task-inc-button">+</button>
</div>
</div>
</div>
Replace aspect-ratio: 1; with width: 20px; in .task-inc-button CSS, I hope it'll help you out. Thank You
*,
::before,
::after {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 22px;
}
.container {
position: relative;
left: 30%;
top: 50px;
width: 40%;
padding: 8px 16px;
border-radius: 30px;
box-shadow: 0px 1px 4px #00000029;
}
.task {
display: flex;
justify-content: space-between;
width: 100%;
}
.task-info {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
}
.task-todo {
overflow: hidden;
text-overflow: ellipsis;
}
.task-buttons {
display: flex;
align-items: center;
position: relative;
}
.task-inc-button {
font-size: 18px;
color: white;
height: 80%;
border: none;
border-radius: 50%;
background-color: #9BE0DB;
cursor: pointer;
width: 20px;
}
<div class="container">
<div class="task">
<div class="task-info">
<div class="task-todo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis magna a sem posuere vestibulum.</div>
</div>
<div class="task-buttons">
<button type="button" class="task-inc-button">+</button>
</div>
</div>
</div>
Related
I don't know where that box thingy comes from under the (-) button. It stretches when the single-card div becomes bigger. When I take out rating div from the single-card div, there is no box thingy under the (-) button. Can anyone please help? Thank you.
I don't know where that box thingy comes from under the (-) button. It stretches when the single-card div becomes bigger. When I take out rating div from the single-card div, there is no box thingy under the (-) button. Can anyone please help? Thank you.
*,*::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
--violet: #8F00FF;
--usernamecolor: rgb(43, 72, 83);
}
.single-card {
margin-top: 60px;
display: flex;
justify-content: center;
background-color: white;
}
.rating {
border-radius: 8px;
width: 35px;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: -5px 0px 8px rgba(172, 169, 169, 0.1);
overflow: hidden;
margin-right: 15px;
}
button {
border: none;
height: 30px;
border-radius: 8px;
align-items: center;
color: var(--violet);
font-weight: bold;
cursor: pointer;
opacity: 0.7;
}
button:hover {
color: purple;
opacity: 1;
}
.rating span {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
color: var(--violet);
font-weight: bold;
}
.wrapper {
width: 800px;
padding: 8px;
}
.top {
display: flex;
align-content: center;
justify-content: space-between;
}
.top .top-left {
display: flex;
}
.top img {
width: 40px;
border-radius: 100%;
margin-right: 15px;
border: 1px solid blue;
}
.top .username {
padding-top: 5px;
margin-bottom: 1px;
margin-right: 10px;
font-weight: bold;
color: var(--usernamecolor);
}
.top .date {
padding-top: 5px;
margin-bottom: 1px;
opacity: 0.8;
}
.top button {
background-color: white;
display: flex;
align-items: center;
}
<div class="single-card">
<div class="rating">
<button>+</button>
<span>12</span>
<button>-</button>
</div>
<div class="wrapper">
<div class="top">
<div class="top-left">
<div><img src="photo.jpg" alt=""></div>
<p class="username">amyrobson</p>
<p class="date">1 month ago</p>
</div>
<button><box-icon name='reply'></box-icon>Reply</button>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero at ut facere. Quae eos soluta nesciunt perspiciatis neque a ipsa omnis eligendi nemo quidem similique, autem minima? Facilis, voluptatibus voluptatum.</p>
</div>
</div>
The - display: flex on .single-card is the cause, in the flexbox container if some items are taller than others, all items will stretch along the cross axis to fill its full size.
add to the container(.single-card): align-items: center / start / end (choose one option as it feet’s your design)
you can read more about it - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
I am using ReactJS. This is the Page component part
<div className="animated main">
<div className="title text">Lorem ipsum dolor sit amet consectetur </div>
<div className="image"></div>
</div>
And this is the page.css component
*{
box-sizing: border-box;
}
.main{
display: flex;
flex-wrap: wrap;
height: fit-content;
}
.title{
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
text-align: left;
font-size: 4em;
font-weight: bold;
padding: 5%;
}
.image{
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
background-image: url(../images/image1.png);
background-repeat: no-repeat;
border: 1px solid black;
position: absolute ;
}
* {
box-sizing: border-box;
}
.main {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
.title {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
text-align: left;
font-size: 4em;
font-weight: bold;
padding: 5%;
}
.image {
flex-basis: 50%;
flex-grow: 0;
flex-shrink: 0;
background-image: url(../images/image1.png);
background-repeat: no-repeat;
border: 1px solid black;
position: absolute;
}
<div class="animated main">
<div class="title text">Lorem ipsum dolor sit amet consectetur </div>
<div class="image"></div>
</div>
I am trying to position the image of the right side of the screen but it disappears whenever i add the position : relative / absolute feature.
Here's a diagram:
I'm trying to make a web page that have a banner (the grey box) with a height of 80vh (when it's possible).
This banner contains a div with a text inside (the blue box) that must be vertically centered inside this banner.
In addition, I have a navigation menu with a height of 100px (the pink line), this menu is positioned in absolute at the top of the banner.
How can I obtain a layout in which the blue box is vertically centered but it cannot cross the navigation menu (pink line) and in which the banner (grey box) cannot be smaller than the height of the blue box + the height of the navigation menu?
I wish I could obtain this result in CSS only.
Here's a code with the partial layout:
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url("https://picsum.photos/id/1015/1920/1080");
height: 80vh;
min-height: 100px; /* + the box inside :( */
}
nav {
position: absolute;
top: 0;
width: 100%;
border-bottom: solid 4px #f5989d;
height: 100px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
.content {
font-size: 18px;
color: white;
text-align: center;
max-width: 400px;
padding: 20px;
background: #6dcff6dd;
border: solid 1px black;
}
<section class="banner">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</section>
Not sure if it's possible to have all the requirement with CSS only so here is a try with almost all the requirement (missing only the last one). I will simply consider position:sticky
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url("https://picsum.photos/id/1015/1920/1080");
height: 80vh;
min-height: 100px; /* + the box inside :( */
}
nav {
position: absolute;
top: 0;
width: 100%;
border-bottom: solid 4px #f5989d;
height: 100px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
.content {
font-size: 18px;
color: white;
text-align: center;
max-width: 400px;
padding: 20px;
background: #6dcff6dd;
border: solid 1px black;
/* the trick start here */
position:sticky;
top:100px;
margin:-100px auto;
}
<section class="banner">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</section>
You can visually hack the last requirement like below:
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url("https://picsum.photos/id/1015/1920/1080") fixed;
height: 80vh;
min-height: 100px; /* + the box inside :( */
}
nav {
position: absolute;
top: 0;
width: 100%;
z-index:2;
border-bottom: solid 4px #f5989d;
height: 100px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
.content {
font-size: 18px;
color: white;
text-align: center;
max-width: 400px;
padding: 20px;
background: #6dcff6dd;
border: solid 1px black;
/* the trick start here */
position:sticky;
top:100px;
margin:-100px auto;
transform-style:preserve-3d;
}
.content::before {
content:"";
position:absolute;
bottom:-2px;
top:0;
left:-50vw;
right:-50vw;
background: url("https://picsum.photos/id/1015/1920/1080") fixed;
transform:translateZ(-1px);
}
body {
overflow-x:hidden;
}
<section class="banner">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</section>
I am trying to create a webpage with a vertically and horizontally centred div, with defined height and width, split down the middle. Almost like an open book.
I have no problems with achieving this in Chrome/Firefox/Safari but cannot get this to reflect in IE11 as half of the 'book' has a greater height than the other half, which leads me to believe the 'height: 863px' property in .loginContainer is causing the issue as it looks marginally better once I move this.
Not totally sure but I think I need to specify an explicit height for the container to stop the content inside becoming squashed - simply removing this property allows the container to be too small so content looks cramped once I put text in there.
I have tried to remove the property and use padding on the content inside to create a bit of space but I don't feel this is the right approach and makes it appear totally different to the mock ups I'm following.
I have created a JSFiddle found here;
https://jsfiddle.net/e02cqdr6/2/
and think the issue lies at;
.loginContainer {
display: flex;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 1;
margin: 0 auto;
width: 1338px;
height: 863px;
border-radius: 15px;}
html,
body {
background-color: rgb(27, 27, 27);
height: 100%;
min-height: 100%;
/* for firefox */
}
.pageContainer {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.loginContainer {
display: flex;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 1;
margin: 0 auto;
width: 1338px;
height: 863px;
border-radius: 15px;
}
.leftContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: center;
background-color: green;
width: 621px;
border-radius: 15px 0 0 15px;
}
.rightContainer {
display: flex;
flex-direction: column;
background-color: #ffffff;
align-items: center;
width: 717px;
border-radius: 0 15px 15px 0;
}
.titleContainer {
display: flex;
flex-direction: column;
width: 100%;
}
input {
height: 30px;
width: 220px;
padding: 0 10px 0 10px;
box-shadow: none !important;
border: 1px solid rgb(243, 241, 241);
border-radius: 15px;
background-color: rgb(243, 241, 241);
color: grey;
}
a {
font-size: 0.7rem;
color: orange;
text-decoration: none;
}
.nextBtn {
margin-top: 10px;
background-color: rgb(134, 200, 223);
color: #ffffff;
}
.assetContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.descContainer {
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
}
.descHeading {
margin: 0 auto;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: normal;
font-weight: 100;
padding-bottom: 5px;
}
.productDesc {
margin: 0 auto;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-style: normal;
font-weight: 100;
width: 440px;
}
.assetLogoBlack {
width: 100%;
height: 100%;
}
.logoContainer {
width: 100%;
}
.servicesLogo {
width: 30%;
}
<div class="pageContainer">
<div class="loginContainer">
<div class="leftContainer">
<div class="assetContainer">
<div class="logoContainer">
<img src="/assets/ilogo.svg" class="servicesLogo">
<img src="/assets/cslogo.svg" class="servicesLogo">
</div>
<div class="descContainer">
<p class="descHeading">Lorem ipsum dolor sit amet</p>
<p class="productDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat sodales arcu id tincidunt. Ut a laoreet risus. Suspendisse potenti. Curabitur in ultricies risus. Vivamus convallis non libero commodo malesuada. Cras eu neque vulputate
lectus sagittis ullamcorper sit amet vitae ante. Integer pellentesque neque eget molestie vehicula. </p>
</div>
</div>
</div>
<div class="rightContainer">
</div>
</div>
</div>
So I expect it to look like this: https://ibb.co/T2Cc59V
but instead it looks like this: https://ibb.co/M8zZ9rs
To reiterate, the problem only exists in IE11.
Nothing stands out as obvious and I have no errors thrown so am totally stumped as to how to resolve this.
Thank you for all the input, I have ended up stripping this back to bare bones to see what is causing the issue as it does work fine on the jsfiddle. It turns out it is the white space around the asset I need to use for the background makes it appear as though it doesn't fill the parent div.
I have this code that I need the div to resize vertically as the text inside increases. The bottom should remain fixed as div increases upwards
<div class ="div-increase">commodo sit amet, posuere lobortis quam. Vestibulum d
</div>
How can I achieve this using css
.div-increase{
position: relative;
display: inline-block;
width: 210px;
height: 100px;
max-width: 210px;
max-height: 250px;
min-height: 1.5em;
border: 1px solid blue;
padding: 3px;
border-radius: 10px;
line-height: normal;
color: red;
}
you can achieve this using flexbox with flex-direction: column-reverse. I've also made the div editable, so you can try the snippet typing some extra text:
.div-increase {
position: relative;
display: flex;
flex-direction: column-reverse;
width: 210px;
height: 100px;
max-width: 210px;
max-height: 250px;
min-height: 1.5em;
border: 1px solid blue;
padding: 3px;
border-radius: 10px;
line-height: normal;
color: red;
}
<div class="div-increase" contenteditable="true">commodo sit amet, posuere lobortis quam. Vestibulum d
</div>
here is my favorite flexbox cheat-sheet, the official docs and browser support