This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 4 years ago.
I have a problem with the display flex, but this only happens in firefox, the idea is not to place absolute position, so I put everything in flex.
Is there a possible solution without using absolute positions?
This error occurs when the browser is a small window
Google Chrome:
Firefox:
CSS:
* {
padding: 0;
margin: 0;
}
.w-100 {
width: 100%;
}
.flex {
display: flex;
align-items: center;
}
.special {
border-bottom: 1px solid #CCC;
padding: 10px;
}
input {
width: 100%;
padding: 10px;
border: none;
background: gray;
}
.flex-2 {
padding-left: 10px;
font-size: 28px;
}
.content {
white-space: nowrap;
}
HTML:
<div class="flex">
<div class="flex w-100 special">
<input type="" class="flex-1" />
<div class="flex-2">
<i class="fa fa-address-book" aria-hidden="true"></i>
</div>
</div>
<div class="content">
content info box content
</div>
</div>
URL: https://codepen.io/anon/pen/RJmWmy
Width and flex layouts don't really work well together. Also you requested the input be 100% of the width which means it would push out the address book element. Also, input fields have a minimum width which you would likely need to reset. Maybe something like this...
Note: I replaced the address book icon with a blue background div so I didn't have to get the css url working.
* {
padding: 0;
margin: 0;
}
.flex {
display: flex;
align-items: center;
}
.flex > .form-fields {
flex: 1 1 0px;
display: flex;
}
.flex > .content {
flex: 0 0 auto;
display: flex;
white-space: nowrap;
}
.flex > .form-fields > .text-input {
flex: 1 1 0px;
border-bottom: 1px solid #CCC;
padding: 10px;
padding: 10px;
border: none;
background: gray;
min-width: 0px;
}
.flex > .form-fields > .address-book-wrapper {
flex: 0 0 28px;
padding: 0px 8px;
background: blue;
}
<div class="flex">
<div class="form-fields">
<input type="" class="text-input" />
<div class="address-book-wrapper">
<i class="fa fa-address-book" aria-hidden="true"></i>
</div>
</div>
<div class="content">
content info box content
</div>
</div>
Related
I have a flexbox with different items inside.
When it wraps onto a new line I want to align this new line with the 2nd item on the first row of the flexbox, but I can't figure out how to do this. The width of the elements will be dynamic, based on the text inside.
div {
font-family: arial, sans-serif;
margin: 5px;
color: white;
border: 1px dotted black;
}
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
}
.unique_element {
background-color: Crimson;
width: 30%;
padding: 10px 10px 10px 10px;
}
.child {
background-color: CornflowerBlue;
padding: 10px 10px 10px 10px;
}
<div class="parent">
<div class="unique_element">First</div>
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
<div class="child">Fifth</div>
</div>
When it wraps onto a new line I want to align this new line with the 2nd item on the first row of the flexbox.
So, the real question is: How to re-arrange flex items when wrapping occurs?
Since HTML and CSS, by themselves, have no concept of when elements wrap, they have no control of this situation. You have to handle it, either with media queries or JavaScript.
Once you've selected your method for detecting the wrap, you can use the order property to re-arrange the items.
To expand on #MichaelBenjamin's fantastic answer:
Since HTML and CSS, by themselves, have no concept of when elements wrap, they have no control of this situation. You have to handle it, either with media queries or JavaScript.
You can work around this by setting a new parent element and nest the unique element as the first child. Set this new master-parent to display: flex;.
div {
font-family: arial, sans-serif;
margin: 5px;
color: white;
border: 1px dotted black;
}
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
}
.unique_element {
background-color: Crimson;
width: 30%;
height: 27px;
padding: 10px 10px 10px 10px;
}
.child {
background-color: CornflowerBlue;
padding: 10px 10px 10px 10px;
}
.master-parent {
display: flex;
width: 400px;
}
<div class="master-parent">
<div class="unique_element">First</div>
<div class="parent">
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
<div class="child">Fifth</div>
</div>
</div>
You can create two divs inside the parent div, one that holds the unique element and one that holds generic children. That's how you get the separation
<div class="parent">
<div class="unique-wrapper">
<div class="unique_element">First</div>
</div>
<div class="child-wrapper">
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
<div class="child">Fifth</div>
</div>
</div>
Style the CSS as shown. Note .unique-wrapper has flex: 3 because you set the width of the element as 30%.
div {
font-family: arial, sans-serif;
margin: 5px;
color: white;
border: 1px dotted black;
}
.parent {
display: flex;
width: 300px;
}
.unique_element {
background-color: Crimson;
padding: 10px 10px 10px 10px;
}
.unique-wrapper, .child-wrapper {
border: none;
margin: 0;
}
.unique-wrapper {
flex: 3;
}
.child-wrapper {
flex: 7;
display: flex;
flex-wrap: wrap;
}
.child {
width: auto;
background-color: CornflowerBlue;
padding: 10px 10px 10px 10px;
}
Here is my codepen if you want to play with the code.
create a dummy element for spacing
div {
font-family: arial, sans-serif;
margin: 5px;
color: white;
border: 1px dotted black;
}
.parent {
display: flex;
flex-wrap: wrap;
width: 300px;
}
.unique_element {
background-color: Crimson;
width: 30%;
padding: 10px 10px 10px 10px;
}
.child {
background-color: CornflowerBlue;
padding: 10px 10px 10px 10px;
}
.hideme{
visibility:invisible;
background-color:white;
border:none;
}
<div class="parent">
<div class="unique_element">First</div>
<div class="child">Second</div>
<div class="child">Third</div>
<div class="unique_element hideme"></div>
<div class="child">Fourth</div>
<div class="child">Fifth</div>
</div>
I am struggling with a flexbox tag here. I have a page header, that consists from two parts: smaller text "A comprehensive manual:" and "How to take a dog from UK to SOME OTHER COUNTRY".
So the problem is, according to design document, "How to take a dog from UK to SOME OTHER COUNTRY" should be centred, but "A comprehensive manual" line shouldn't, it should start right above letter "H" in the second line, "How to take...", as shown on a picture below:
here
Obviously, when I resize a window, flexbox starts doing it thing and wars text around, changing the position of the "How", however "A comprehensive manual" should also move to keep along.
Is it possible with a flexbox, or I should use ::after pseudoelement to achieve it? Or maybe there is better solution?
Code is below, there is also a link to the codepen with an example.
Many thanks!
<div class="take-where-box">
<div class="flex">
<div class="take-where-box__text-block large" id="take-where-box__text-block-intro"><p class="take-where-box__small-text">A Comperhensive Manual:</p></div>
<div class="take-where-box__text-block" id="take-where-box__text-block-1"><p>How to take a dog</p></div>
<div class="take-where-box__text-block" id="take-where-box__text-block-2"><p>from UK</p></div>
<div class="take-where-box__text-block" id="take-where-box__text-block-3">
<div class="select-box">
/*code for select box*/
</div> <!-- end of select-box-->
</div>
</div>
</div> <!-- take-where-box-->
Full codepen is here:
https://codepen.io/abby97/pen/oNYjrpV
Perhaps the layout can be achieved with a minor adjustment to the align-items property and a pseudo element.
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end; /* changed from baseline */
}
#take-where-box__text-block-1::before {
font-size: 70%;
content: "A Comprehensive Manual:";
}
#take-where-box__text-block-1::before {
font-size: 70%;
content: "A Comprehensive Manual:";
}
body,
html {
margin: 0;
padding: 0;
font-family: 'Calibri', serif;
font-size: 100%;
color: black;
background-color: var(--cyan-superdark);
}
.container {
background-color: var(--main_color);
margin: 0 auto;
width: 80%;
}
.header,
.content {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.header {
background-color: var(--yellow-main);
}
.content {
background-color: var(--cyan-superdark);
}
.take-where-box {
font-size: 3rem;
justify-content: center;
align-items: center;
font-weight: bold;
width: 90%;
border: 0.4rem solid black;
padding: 1.5rem;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
}
.take-where-box__small-text {
font-size: 70%;
margin: 0;
}
.take-where-box__text-block {
flex-basis: 1;
/* flex-shrink: 0; */
/* min-width: min-content; */
padding: 0 0.5rem;
}
.large {
flex-basis: 100%;
}
.take-where-box__text-block>p {
margin: 0;
}
/*select-box - a custom select box, taken from https://www.youtube.com/watch?v=k4gzE80FKb0 */
.select-box {
display: flex;
flex-direction: column;
position: relative;
width: 22rem;
}
.select-box__selected-option,
.select-box__options-container {
border: 0.4rem solid black;
}
.select-box .select-box__options-container {
max-height: 0;
opacity: 0;
transition: all 0.3s;
/* what are other options? */
order: 1;
}
.select-box__selected-option {
margin-bottom: 8px;
position: relative;
order: 0;
}
.select-box__options-container {
position: absolute;
box-sizing: border-box;
/*otherwise border will add up to the witdh of this element making it bigger than parent, BAD!*/
width: 100%;
top: 7.5rem;
background-color: white
}
.select-box__selected-option::after {
content: "";
background: url("assets/arrow-down.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 3.0rem;
/* height: 4rem; */
right: 1rem;
top: 1rem;
transition: all 0.4s;
}
.select-box .select-box__options-container.active+.select-box__selected-option::after {
transform: rotateX(180deg);
top: -1rem;
}
.select-box .select-box__options-container.active {
max-height: min-content;
opacity: 1;
}
.select-box .select-box__option,
.select-box__selected-option {
padding: 0.5rem 1rem;
cursor: pointer;
}
.select-box .select-box__option:hover {
background-color: blue;
}
.select-box label {
cursor: pointer;
}
.select-box .select-box__option .radio {
display: none;
}
<div class="container">
<div class="take-where-box">
<div class="flex">
<div class="take-where-box__text-block large" id="take-where-box__text-block-intro">
<!--<p class="take-where-box__small-text">A Comperhensive Manual: </p>-->
</div>
<div class="take-where-box__text-block" id="take-where-box__text-block-1">
<p>How to take a dog</p>
</div>
<div class="take-where-box__text-block" id="take-where-box__text-block-2">
<p>from UK</p>
</div>
<div class="take-where-box__text-block" id="take-where-box__text-block-3">
<div class="select-box">
<div class="select-box__options-container">
<div class="select-box__option">
<input type="radio" class="radio" id="US" name="category">
<label for="US">to US</label>
</div>
<div class="select-box__option">
<input type="radio" class="radio" id="EU" name="category">
<label for="EU">to EU</label>
</div>
</div>
<!-- end of select-boxoptions-container-->
<div class="select-box__selected-option">
to US
</div>
</div>
<!-- end of select-box-->
</div>
</div>
</div>
<!-- take-where-box-->
</div>
revised codepen
i believe your code is unnecessery overcomplicated.
element positioning like in image you can achieve with this piece of code. please note that css is inline, because this is just a guidline, you can adapt it by your needs:
<div style="display:flex; align-items:center; flex-direction:column">
<div>
<div>
<p>A Comperhensive Manual:</p>
</div>
<div style="display:flex">
<p>How to take a dog from UK</p>
<p>selectbox</p>
</div>
</div>
</div>
This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Closed 2 years ago.
I have two boxes I want to be displayed side-by-side. I had them displayed side-by-side fine but the left box was not vertically centered.
I followed a guide online on how to vertically align the boxes and it worked, except now the responsiveness is all messed up, if I resize the window to be very thin, the boxes dont wrap or overflow neatly.
https://jsfiddle.net/martinradio/adqLpxn5/85/
<div>
<style>
#container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
width:100%;
}
.box {
width: 50%;
box-sizing:border-box;
margin: 5px;
text-align: center;
}
</style>
<div id="container" class='w-100' >
<!-- flex container -->
<div class="box" style='background:red'>
<!-- flex item -->
<div class="form-group">
<div id='taggerErrDisplay'></div>
<input size="22" type="text" placeholder='Discogs URL' name="url" id="urlInput">
<button style="cursor: pointer;" id='urlInputButton' name="data" type="button"
onclick="submitDiscogsURL(document.getElementById('urlInput').value)">Submit</button>
</div>
</div>
<div class=" box" style='background:blue'>
<!-- flex item -->
<div id="drop-area">
<form class="my-form">
<h5>Upload multiple files with the file dialog or by dragging and dropping files here.</h5>
<br>
<input style="cursor: pointer;" type="file" id="file" multiple="multiple" />
</form>
</div>
</div>
</div>
<style>
#drop-area {
/* border: 2px dashed #ccc; */
border-radius: 20px;
width: 480px;
padding: 20px;
}
/*
#drop-area.highlight {
border-color: purple;
}
*/
p {
margin-top: 0;
}
.my-form {
margin-bottom: 10px;
}
#gallery {
margin-top: 10px;
}
#gallery img {
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
}
.button {
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
border: 1px solid #ccc;
}
.button:hover {
background: #ddd;
}
#fileElem {
display: none;
}
</style>
</div>
I tried changing the flex properties but it causes both elements to remain permanently overflowed:
I don't know but you can try this.
Change the css as below:
#container {
display: flex;
flex-direction: row;
align-items: center;
width:100%;
}
.box {
width: 50%;
box-sizing:border-box;
margin: 5px;
text-align: center;
* {
border: none;
font-family: monospace;
}
html, body {height: 100%;}
body {
display: flex;
align-items: center;
padding: 10px;
}
.container {
background: #eee;
box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
margin: auto;
width: 500px;
padding: 30px 20px 20px;
}
/* main css starts here */
.row {
display: flex;
margin-bottom: 10px
}
input {
flex: 1;
padding: 2px 10px;
margin-left: 10px;
border: dotted 1px #bbb;
border-radius: 20px;
background: #fefefe
}
<div class="container">
<div class="row">
<label>hey ya!</label>
<input/>
</div>
<div class="row">
<label>how are you?</label>
<input/>
</div>
<div class="row">
<label>i am fine</label>
<input/>
</div>
</div>
I want all labels to have same width, where width is exactly equal to the content width of widest label. I want layout to automatically adjust all label width.
Right now, you can see the width of labels is different. If I want same width label then I have to either add a flex-basis property to label items or give them a min-width value. I dont want to do either of them as then I have to manually first check the width of widest label element and layout will break if I change letter spacing or choose some wide font.
In XUL there is a vbox element which helps to make such kind of layout and in html I guess table can be used to do so but I am looking for a flexbox solution.
Just as Niet pointed out, use display: table
* {
border: none;
font-family: monospace;
}
html, body {height: 100%;}
body {
display: flex;
align-items: center;
padding: 10px;
}
.container {
display: table;
background: #eee;
box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
margin: auto;
padding: 30px 20px 20px;
}
/* main css starts here */
.row {
display: table-row;
margin-bottom: 10px
}
label {
display: table-cell;
padding: 5px;
}
input {
padding: 2px 10px;
margin-left: 10px;
border: dotted 1px #bbb;
border-radius: 20px;
background: #fefefe
}
<div class="container">
<div class="row">
<label>hey ya!</label>
<input/>
</div>
<div class="row">
<label>how are you?</label>
<input/>
</div>
<div class="row">
<label>i am fine</label>
<input/>
</div>
</div>
I'm designing a form using flexbox so that it can be responsive on desktop and mobile. Here is a demo of what I have so far:
http://codepen.io/sontek/pen/akQqYN?editors=1100
CSS:
#import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
body {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
.control .input {
color: #5f5f5f;
box-sizing: border-box;
width: 60%;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 15px;
border: 1px solid #dbdbdb;
display: inline-flex;
}
.control.success .input {
border: 1px solid #4EA822;
}
.control.success i {
color: #4EA822;
}
.control.error .input {
border: 1px solid rgba(237,108,99, 0.7);
}
.control.error i {
color: #ed6c63;
}
.control {
margin-bottom: 10px;
min-width: 300px;
width: 100%;
}
.control .help {
margin-top: 10px;
color: #999;
font-size: 0.9em;
#media (min-width: 600px) {
text-align: right;
}
}
.control .row {
display: flex;
flex-direction: column;
#media (min-width: 600px) {
align-items: center;
justify-content: center;
flex-direction: row;
}
}
.control .label {
font-size: 1.2em;
color: #555;
#media (min-width: 600px) {
text-align: right;
}
padding-right: 10px;
}
.control .row {
.label {
flex: 1;
}
.input {
flex: 2;
padding-right: 30px;
padding-left: 30px;
width: 100%;
}
i {
width: 0;
display: inline-flex;
position: relative;
left: -25px;
}
}
.control i {
font-size: 20px;
}
.center-block {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
}
HTML:
<form class="center-block">
<div class="control">
<div class="row">
<label class="label">Standard</label>
<input type="text" name="text-input" class="input"/>
</div>
<div class="help">
Help Information
</div>
</div>
<div class="control success">
<div class="row">
<label class="label">Success</label>
<input type="text" name="text-input" class="input"/>
<i class="fa fa-check"></i>
</div>
<div class="help">
Help Information
</div>
</div>
<div class="control error">
<div class="row">
<label class="label">Error</label>
<input type="text" name="text-input" class="input"/>
<i class="fa fa-warning"></i>
</div>
<div class="help">
Help Information
</div>
</div>
</form>
The problem right now is that when its responsive on mobile and flips to column direction in the flow the icons drop blew:
EDIT The above screenshot doesn't reflect the codepen, I was able to get the icon aligned on the left side of the textbox for mobile but I'd prefer having it on the right side of the textbox.
EDIT 2: I've fixed the icons. Just need to fix the whitespace problem now.
I'd like it to stay within the input when its row and when its column.
The other big issue I have is with spacing on the labels, I'd like to label to only flex enough to be as wide as the widest label and let the input take over the rest of the space, that way they are aligned properly.
This whitespace is unnecessary:
The icons are shifting to the bottom because on smaller screens you're switching the container to flex-direction: column. Hence, the label, input and icon (all flex items), are stacking vertically.
Instead, for smaller screens, keep the container in flex-direction: row, add flex-wrap: wrap, and give the label a 100% width. This will force the input and icon to the next line.
/* .control .row { flex-direction: column; } */
.control .row { flex-wrap: wrap; }
.control .label { flex: 0 0 100%; }
To fix the white space issue on the left, try this:
#media (min-width: 600px)
.control .row .label {
/* flex: 1; */
flex: 1 0 10%;
white-space: nowrap;
}
.control .row .input {
flex: 2;
padding-right: 30px;
padding-left: 30px;
/* width: 100%; */
}
Now, the text-align rule in your code will position the label within the width limitation applied (10% in my example).