First I used the flex: property to make two adjacent flexitems grow and shrink when the browser window was resized. That worked.
Then I put a TEXTAEA element into the second dynamic flexitem. That worked fine.
Added a single-line TEXT input element next to the textarea and observed that the bottom line of the text input element aligned with the bottom line of the textarea, but I want the top lines of the two elements to align. How can I do that without scripting using CSS only?
.parent {
display: flex;
background-color: yellow;
}
.verttop {
align-items: flex-start;
}
.dimen {
height: 50px;
width: 50px;
}
.placeholder {
background-color: khaki;
width: 300px;
}
.bs1 {
background-color: green;
width: 20px;
}
.bs2 {
flex: 1 1 auto;
background-color: cyan;
}
.bs3 {
flex: 1 1 auto;
background-color: red;
}
.bs4 {
background-color: gray;
width: 100px;
}
<div class="parent">
<div class="placeholder dimen"></div>
<div class="bs1 dimen"></div>
<div class="bs2 dimen"></div>
<div class="bs3">
<textarea rows="10" cols="18">This is a fairly lengthy and annoyingly meaningless sentence.
</textarea>
<input class="verttop" type="text" value="Hello">
</div>
<div class="bs4 dimen"></div>
</div>
You can do this by making .bs3 flex and aligning its items.
.bs3 {
flex: 1 1 auto;
background-color: red;
display: flex;
align-items: flex-start;
}
Related
How can I create icons with text below them in a row, with css?
I currently have this:
<div class="icon-stats">
<div class="video-stats-holder">
<span class="icon-video-stat"></span><span class="video-stat-descr">12</span>
</div>
<div class="playlist-stats-holder">
<span class="icon-playlist-stat"></span><span class="playlist-stat-descr" >5</span>
</div>
</div>
with my css:
.icon-stats {
max-width: 160px;
padding-top: 30px;
}
.video-stats-holder, .playlist-stats-holder {
display: flex;
align-items: center;
flex-direction: column;
}
.icon-video-stat, .icon-playlist-stat {
padding: 5px;
height: 64px;
width: 64px;
}
.icon-video-stat {
background: url('/css/icons/video-stats.png');
}
.icon-playlist-stat {
background: url('/css/icons/playlist-stats.png');
}
The code above is based on this answer, but that doesn't completely work for me, it seems.
The icon and text appear now in one column, all below each other.
I want the icons next to each other, (with the text centered below it).
You can give .icon-stats class a display property of flex display:flex
Just update your CSS with the following code
.icon-stats {
max-width: 160px;
padding-top: 30px;
display: flex;
}
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 1 year ago.
Below is simple example illustrating the problem. I have "Stackoverflow Stackoverflow" string and in first case it is displayed as a single line and in the second case word wrap happens. As you can see in the second case width of the div element is wider than a single "Stackoverflow" word. Is there a way to get rid of this empty space on the right? Resulting element has width 200px as specified per max-width but I want element to have actual width which is enough to fit it into 200px after word wrap.
body {
font-size: 30px;
}
.row {
margin-bottom: 10px;
}
.text-no-wrap {
background: yellowgreen;
white-space: nowrap;
display: inline-block;
}
.text-wrap {
max-width: 200px;
background: tomato;
white-space: normal;
display: inline-block;
}
<div class="row">
<div class="text-no-wrap">Stackoverflow Stackoverflow</div>
</div>
<div class="row">
<div class="text-wrap">Stackoverflow Stackoverflow</div>
</div>
You could try adding width: max-content; to the div's insde the .row
Note that width: max-content; isn't supported in Internet Explorer, but is supported on all other browsers.
Check the support of width: max-content; here.
I've added flex-direction: column; to the .row so the children of those
div's will appear underneath each other.
If you need display: flex; on the .row div, then This is the way to go. If you don't need display: flex; on the .row div, just simply remove it. And only use width: max-content; on the children;
body {
font-size: 30px;
}
.row {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.text-no-wrap {
width: max-content;
background: yellowgreen;
}
.text-wrap {
width: max-content;
background: tomato;
}
<div class="row">
<div class="text-no-wrap">Stackoverflow1 Stackoverflow2</div>
</div>
<div class="row">
<div class="text-wrap">Stackoverflow1 Stackoverflow2</div>
<div class="text-wrap">Stackoverflow1 Stackoverflow2</div>
</div>
I believe this one is not a text-wrap issue. If you check the following code you will get multiple spaces in between wrapping text. This one is due to the
max-width: 200px;
specified for
.text-wrap.
body {
font-size: 30px;
}
.row {
display: flex;
margin-bottom: 10px;
}
.text-no-wrap {
background: yellowgreen;
white-space: nowrap;
}
.text-wrap {
max-width: 200px;
background: tomato;
white-space: normal;
}
<html>
<body>
<div class="row">
<div class="text-no-wrap">Stackoverflow Stackoverflow</div>
</div>
<div class="row">
<div class="text-wrap">Stackoverflow Stackoverflow testing text wrapping space issue</div>
</div>
</body>
</html>
Go through the demo you can see that after "testing text" multiple spaces is there.
I've had a bit of an issue with some flex containers. They're a label and an input in a flex container. Unfortunately, if I change the height of the container from auto, the contents cease aligning - the label's text remains at the start of the flexbox, but the input's text follows the middle. I've written a MWE to demonstrate.
label, input {
border-style: solid;
border-width: 2px;
border-color: red;
background-color: black;
}
.stretch {
display:flex;
height: 4em;
}
.baseline {
display: flex;
height: 4em;
align-content: baseline;
}
.flex-innards {
display: flex;
height: 4em;
align-content: stretch;
}
.flex-innards * {
display: flex;
align-items: center;
}
.flex-innards-start {
display: flex;
height: 4em;
align-content: stretch;
}
.flex-innards-start * {
display: flex;
align-items: flex-start;
}
.short {
height: auto;
}
<div class="stretch">
<label>Stretch alignment</label>
<input value=":("></input>
</div>
<div class="baseline">
<label>How about baseline?</label>
<input value=">:("></input>
</div>
<div class="flex-innards">
<label>Flexing the children kinda works</label>
<input value=":o"></input>
</div>
<div class="flex-innards-start">
<label>But only if they're centered</label>
<input value=":("></input>
</div>
<div class="field short">
<label>Deceptive stretch</label>
<input value=":S"></input>
</div>
https://jsbin.com/nulobolulo/edit?html,css,output.
I've managed to make them vertically centered together in the third box there (using How to vertically align and stretch content using CSS flexbox), but I'd like to have them both have their text aligned to flex-start, as well as filling the complete height of their container.
If possible, I'd like to avoid adding extra elements to the HTML. Thank you.
I think the only way to address this problem with CSS uses the padding property.
input {
padding-bottom: 40px;
}
label,
input {
border-style: solid;
border-width: 2px;
border-color: red;
}
.stretch {
display: flex;
height: 4em;
}
<div class="stretch">
<label>Stretch alignment</label>
<input value=":(">
</div>
I have two block elements that I would like to be on the same horizontal line. One is a FORM and the other is a DIV.
<div id="miningArea">
<form id="curWorkForm">...</form>
<div id="buttonDescription">
To begin, click thde "Start" button.
</div>
</div>
I thought adding display:inline-block was the key to keeping the elements on the same line. But when I add
#buttonDescription {
display: inline-block;
}
My text element still appears beneath my FORM element -- https://jsfiddle.net/5j57hkLr/6/ . How can I get that other DIV element to appear on the same line?
When there is a lot of text, you have to limit the width of inline-block elements by applying width settings to them which allow both elements to fit into one line, for example width: 50% and width: 45%
Otherwise they will by default expand according to the text, which will result in 100% width when there's enough text to fill a full line.
These are the the 3 ways ways I would think about approaching this:
(Here is a your JSFiddle back with some changes.)
1:
.wrapper {
overflow: hidden;
border: red dashed 1px;
/* For Testing*/
}
.style {
margin: 0;
padding: 10px;
float: left;
}
<div class="wrapper">
<form>
<input class="style" placeholder="Enter Value" />
</form>
<button class="style">Submit</button>
</div>
2: Responsive
* {
box-sizing: border-box;
margin: 0;
}
input, button {padding:10px;}
input {width: 100%;} /* replace "input" with "input , button" if you want the button to take up full with*/
.column {
float: left;
width: 50%;
border: red dashed 1px; /*For Testing*/
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="row">
<div class="column">
<form>
<input class="style" placeholder="Enter Value" />
</form>
</div>
<div class="column">
<button class="style">Submit</button>
</div>
</div>
3:
* {
box-sizing: border-box;
margin: 0;
}
#mainWrapper {
overflow: hidden;
display: inline-block;
}
button,
input {
width: 100%;
padding: 10px;
}
.formWrap {
float: left;
width: 300px;
}
.btnWrap {
float: left;
width: 100px;
}
<div id="mainWrapper">
<div class="formWrap">
<form>
<input placeholder="Enter Value" />
</form>
</div>
<div class="btnWrap">
<button>Submit</button>
</div>
</div>
add this to your css
#buttonDescription,form {
display: inline-block;
vertical-align:middle;
}
Inorder for two or more elements to be on same line, all the elements should be made display: inline or inline blocks
Here is a working example: https://jsfiddle.net/6wjftgf2/2/
#buttonDescription,form {
display: inline-block;
}
<div id="miningArea">
<form id="curWorkForm"><input placeholder="My Form"/></form>
<div id="buttonDescription">
<button>My Button</button>
</div>
</div>
You can also use flex for this work the code is as follows
.miningArea
{
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
form
{
width: 60%;
}
div
{
width: 40%;
}
.miningArea {
display: flex;
flex-wrap: wrap;
}
form { width: 60%; }
div { width: 40%; }
I am trying to make a simple nav with next and previous buttons. Previous is at the far left of the container, and next at the far right. I know what you're thinking: this is the ideal time to use justify-content: space-between. However, when a user is on the first page or the last page, the backend doesn't output the previous and next buttons respectively. This causes the next button to be aligned left on the first page, and that's not what I want.
I thought I could use align-self on the children. The problem I encounter now is that the first child pushes the second one down and I don't know how to fix this.
Here's a snippet
.container {
display: flex;
}
.container * {
width: 10%;
height: 80px;
}
#d1 {
background: green;
align-self: flex-start;
}
#d2 {
background: red;
align-self: flex-end;
}
<div class="container">
<div id="d1">
div 1
</div>
<div id="d2">
div 2
</div>
</div>
I completely forgot about magic margins in flex. Here goes:
.container {
display: flex;
}
.container * {
width: 10%;
height: 80px;
}
#d1 {
margin-right: auto;
background: red;
}
#d2 {
margin-left: auto;
background: green;
}
<div class="container">
<div id="d1">
div 1
</div>
<div id="d2">
div 2
</div>
</div>