I want to achieve the following: a two-column layout. The first column contains text, the second column e.g. Input fields. The total space available in the second column should be used by the input fields, minus the first column.
When falling below a certain window width, the second column should be placed below the first.
Unfortunately, after a break, only 80% of the width is used by the input field. How can you ensure that the entire width is used by the input field after a break?
I don't want to use libraries and, if possible, Javascript.
I linked my experiment here.
https://codepen.io/ekadagami/pen/ExPayBR
This is the css code I use
.flex-container {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
div > div:nth-child(odd) {
flex: 1 0 20%;
max-width: 200px;
min-width: 100px;
background: lightgreen;
}
div > div:nth-child(even) {
flex: 0 1 80%;
background: lightblue;
}
<div class="flex-container">
<div>one bit of text</div>
<div><input style="width:100%;" /></div>
<div>tiny text</div>
<div><input type="checkbox" /></div>
<div>a little bit more text</div>
<div><input style="width:100%;" /></div>
<div>even more text</div>
<div><textarea style="width:100%;">hello world</textarea></div>
</div>
Related
I am trying to replicate stackoverflow-like design and ran into problem.
<div class="flex-grow-0 pd-around-m"> # line 1
<div class="flex-col fill-row mr-around-s"> # line 2
<div class="flex-row fill-row"> # line 3
<div class="flex-col justify-center mr-around-m"> # line 4
//Buttons
</div>
<span>
//Long Text!!
</span>
</div>
<div class="answer-bottom"></div>
</div>
</div>
.fill-row {
width: 100%
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.mr-around-m {
margin: 1rem;
}
.justify-center {
justify-content: center;
}
When I enter long text in <span>, <div> in line 2, line 3 goes out of div box in line 1.
I tried adding white-space: pre-line to div in line 2 and directly at span but still text goes out of the box.
How can I keep the text inside parent div?
navigation bar on the left has property width:20% but gets squashed. Is this because of the textbox problem I asked above?
EDIT
https://jsfiddle.net/pzcu2yjn/
Here's a replication of my problem. if you make the text in span short enough, navbar and menu will have some empty space in the left maintaining 20% of the screen. however, if you leave the long text as it is, it gets squashed and 20% gets ignored
Few things:
On using flex it is good to provide width for left and right container since container will not know what it should when content increases.
Once you have the width assigned to the right container that is when you can use wrap functionality so the wrap works only for right container and it doesn't have no impact on less container. overflow-break-word;
NOTE:
I have removed unwanted code from the code, you can put it back it has no impact if those are needed.
.flex-row {
display: flex;
width: 100%;
}
.navbar {
display: flex;
flex-direction: column;
justify-content: flex-start;
border-right: 0.05rem solid var(--main-border-color);
align-items: flex-end;
width: 20%;
border: 1px solid red;
}
.pd-around-m {
width: 80%;
border: 1px solid blue;
display: inline-block;
overflow-wrap: break-word;
}
<div class="flex-row">
<div class="navbar">
<div>
menu1
</div>
</div>
<div class="flex-grow-0 pd-around-m">
<div class="flex-col fill-row mr-around-s">
<div class="fill-row">
<span>
AaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaa
</span>
</div>
<div class="answer-bottom"></div>
</div>
</div>
</div>
You can add overflow: hidden; to prevent the text from going outside of your div.
There's a very similar question with a precise answer:
<span> element going outside of <div> element
I'm trying to make a media query to display an input below the other instead on your side using Flexbox. As you can see, with my current code, I'm getting this:
But if I change the flex-direction to column, the input width is not the original. This is the result:
This is the my HTML:
<div id="mc_embed_signup">
<form action="//eliasgarcia.us8.list-manage.com/subscribe/post?u=55cf7078733f0b62eb97733e3&id=ace40b1824" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">No te pierdas ningún artículo</label>
<div class="mc-wrapper">
<input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Correo electrónico" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_55cf7078733f0b62eb97733e3_ace40b1824" tabindex="1" value="">
</div>
<div>
<input type="submit" value="Suscríbete" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
<div class="mc-error">
</div>
</div>
</form>
</div>
And this is my CSS:
#mc_embed_signup {
label {
font-size: 2em;
font-weight: bold;
display: block;
text-align: center;
}
.mc-wrapper {
display: flex;
justify-content: space-between;
padding: 30px 0px 0px 0px;
}
#mce-EMAIL {
width: 100%;
margin: 0px 30px 0px 0px;
border: 2px solid $medium-grey;
border-radius: 4px;
text-indent: 20px;
}
.button {
margin: 0px auto;
cursor: pointer;
}
}
Why is this happening?
NOTE: I can't provide a Fiddle because this is an integration with MailChip, so it calls a JS Script and it's not working properly on Fiddle, I don't know why... But the script doesn't add any extra classes, only the ones above.
The flex children of a flex parent with flex-direction: row (the default for display: flex) will be equal heights. So since your left input is a direct child of .mc-wrapper, it's height will be equal to the height of the item beside it, and that will cause the input's height to grow since the flex child on the right is taller.
When you switch to a flex-direction: column you no longer have adjacent children in a row, and flexbox will not try to match the heights, so the input will be whatever height it is naturally.
Add
flex-flow: wrap;
This way, the height will remain as it.
display: flex; won't affect it
IMPORTANT
There is a style called align-items which by default is stretch. This is what it makes the elements width/height to match it's parents depending on flex-direction.
For anyone getting here, this might be useful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You must change just "align-items".
I have this HTML case:
<section>
<hgroup>
<h1>Our Products</h1>
<h3>We build all kind of containers</h3>
<p>Lorem Ipsum is simply dummy text of the printing..</p>
</hgroup>
<button class="full-color pull-right">View All Products</button>
</section>
...and the CSS is like that:
section {
display: flex;
flex-direction: row;
justify-content: space-between;
}
Now input height is same as hgroup
But, if I add to the section:
align-items: baseline;
the input height is like you expected. You must avoid:
align-items: inherit/unset/stretch/initial/normal
You just need to add flex-flow: wrap-reverse to the flex parent and then everything goes well :)
example:
.parent {
display:flex;
flex-direction: column-reverse;
flex-flow: wrap-reverse;
}
Good Luck
I am wondering if this is possible: I have a header that can contain a variable amount of text. Below that I have another element which I want to take up the remaining height of the page.
<div class="header row">
<div class="title column large-5">Potentially very long text</div>
<div class="menu column large-7">Menu items</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
Normally I would do this using calc, eg:
.content {
height: calc(100vh - 75px);
}
Where 75px is the set height of .header.
But in this example, the .header element is dynamic and does not have a set height. Only a padding and font-size are set.
To complicate things, this also uses the Foundation Grid layout, which makes me nervous about using display: table (.title and .menu sit side by side on desktop, but stacked on mobile) .
Is there anyway to get the height of the dynamic header element (without resorting to JQuery)?
You can use flexbox and set .content to flex-grow: 1 so that it will fill to grow the available space.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.content {
flex-grow: 1;
background: #eee;
}
<div class="header row">
<div class="title column large-5">Potentially very long text</div>
<div class="menu column large-7">Menu items</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
I made a small pen to show the way to do this using flex box, it involved changing your markup a bit:
css:
.container {
display: flex;
flex-direction: column;
height: 250px; // whatever you want here
}
.header {
width: 100%;
background: red;
padding: 10px;
}
.content {
background: yellow;
width: 100%;
flex-grow: 1;
}
So the content will always take the available space inside the content div.
check the whole pen: http://codepen.io/anshul119/pen/yMYeLa
hope this helps.
I have 2 divs inside another div container. I'm using flexbox to center them vertically inside the container, but I want them to be next to each other horizontally rather than one on top of the other. I tried a few different approaches including changing the display property of the container from flex to inline-flex as well as adding display:inline-block to the child divs. Here is a picture of what I'm working with. As you can see the 2 divs (the picture and group 1 label) are centered within the parent div, but I want Group 1 to be next to the picture instead of below it.
Code below and link to JSfiddle:
HTML
<div class="user-group">
<div>
Picture 1
</div>
<div class="user-group-name"><h4>Group 1</h4></div>
</div>
JS
.user-group{
font-family: 'Purista';
border: solid 1px;
display: inline-flex;
float: left;
justify-content:center;
align-content:center;
flex-direction:column; /* column | row */
width: 50%;
height: 200px;
}
.user-group > div{
display: inline-flex;
}
It depends if you intend to have multiple picture + text pairs in the element. If you don't, simply using align-items: center should fix your issue. There are some issues with your code:
align-content is not a flex property
Avoid using display: inline-flex, your situation does not call for it
Floats and flex are conflicting layout methods. Pick one—in this case, we settle for flex.
Use the default flex direction, which is row (if undeclared, it defaults to row, so we can just remove that property)
.user-group {
font-family: 'Purista';
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 200px;
}
h4 {
margin: 0;
}
<div class="user-group">
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
</div>
<div class="user-group-name">
<h4>Group 1</h4></div>
</div>
On the other hand, if you have multiple picture + text pairs, you will have to resort to nesting. Each pair will have to be wrapped by an additional <div>:
.user-group {
font-family: 'Purista';
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 50%;
height: 200px;
}
.user-group > div {
display: flex;
margin-bottom: 10px;
}
h4 {
margin: 0;
}
<div class="user-group">
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 1</h4></div>
</div>
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 2</h4></div>
</div>
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 3</h4></div>
</div>
</div>
Using a two-column flexbox layout, how can different-sized children be made to fill all available space, instead of all children having the height of the tallest child of the row?
I set up a demo on jsbin that illustrates the problem. I'd like for all the children to be the size of their wrapped contents.
#container {
width: 800px;
display: flex;
flex-wrap: wrap;
}
.cell {
width: 300px;
flex; 1 auto;
}
<div id="container">
<div class="cell">
Cells with arbitrarily long content.</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
</div>
</body>
</html>
This is how Flexbox rows are expected to behave. Flexbox is not meant to recreate Masonry with pure CSS: items in one row cannot occupy space allocated for a preceding/following row (same goes for columns if you're using column orientation). You can use align-items to prevent them from stretching, but that's about it:
http://cssdeck.com/labs/9s9rhrhl
#container {
width: 800px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.cell {
width: 300px;
flex: 1 auto;
padding: 10px;
border: 1px solid red;
}
Otherwise, you should be using the column orientation or the multi-column module (see this SO answer: https://stackoverflow.com/a/20862961/1652962)