In having an issue in Internet explorer where it does not render flex box elements correctly in conjunction to rows.
Columns seem to work fine in both browsers but...
IE 11 seems to be shrinking the rows for no reason? meaning I can fix it by applying flex: 1 0 auto(prevent shrinking) to rows and flex:1 to columns but is not constant code.
Is there a fix to it in IE or am I doing something wrong as Chrome renders it correctly this is my current fix and seems like a hack to me.
Chrome
IE:
<html>
<body>
<style>
div.form {
display: block;
width: 500px;
height: 500px;
overflow-y: scroll;
}
div.container-row {
display: flex;
flex-direction: column;
background-color: white;
}
div.container-col {
display: flex;
flex-direction: row;
background-color: white;
}
div.field {
display: inline-flex;
flex: 1;
background-color: purple;
padding: 10px;
box-sizing: border-box;
}
div.value {
display: inline-flex;
flex: 1;
background-color: pink;
}
input[type=text] {
width: 100%;
padding: 10px;
}
</style>
<div class="form">
<div class="container-row">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
<div class="container-row">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
<div class="container-col">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
<div class="container-col">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
</div>
</body>
</html>
Fiddle: https://jsfiddle.net/e2jwc371/3/
Cheers for the help ;)
When using flex: 1;, you're not only setting flex-grow and flex-shrink. You're also setting flex-basis (relative sizing between the elements) to 0%. That's probably what's confusing IE.
Change the flex properties to use auto-sizing (flex: 1 auto;), and it works correctly in IE too:
...
div.field {
display: inline-flex;
flex: 1 auto;
background-color: purple;
padding: 10px;
box-sizing: border-box;
}
div.value {
display: inline-flex;
flex: 1 auto;
background-color: pink;
}
...
Updated JSFiddle: https://jsfiddle.net/e2jwc371/4/
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
So, I am new at coding. I was trying to make a very basic static webpage of a calculator using html and css and js.
This is the html
#input {
margin: 0 auto;
}
#num {
border-radius: 25px;
background: #73AD21;
display: inline-block;
padding: 15px;
width: 200px;
height: 100px;
}
<body>
<div id="input">
<div id="num">
<label for="num1">Enter the first number</label>
<input type="number" name="num1" id="num1">
</div>
<div id="num">
<label for="num2">Enter the second number</label>
<input type="number" name="num2" id="num1">
</div>
</div>
<div id="op">
<div id="opadd"><input type="submit" name="add" class="add" value="Add" onclick="add()"></div>
<div id="opsbtrct"><input type="submit" name="subtract" class="sbtrct" value="Subtract" onclick="sbtrct()"></div>
<div id="opmult"><input type="submit" name="multiply" class="mult" value="Multiply" onclick="mult()"></div>
<div id="opdvde"><input type="submit" name="divide" class="add" value="Divide" onclick="dvde()"></div>
</div>
</body>
I want that the #num be centered horizontally.
I tried using
margin: auto;
and
margin: 0 auto;
but nothing works. Please help.
I've been at it for hours.
Here is the complicated way of doing this.
You should create a container div, so you can center the object in.
#container {
display: flex; /* establish flex container */
flex-direction: row; /* default value; can be omitted */
flex-wrap: nowrap; /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
background-color: lightyellow;
}
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
}
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
when you add margin: 0 auto be sure the html tag not inline or inline-block it should be 'block' css with specific width.
#num {
border-radius: 25px;
background: #73AD21;
display: block;
padding: 15px;
width: 200px;
height: 100px;
margin: 1em auto;
}
label{
white-space: nowrap;
}
just replace this code hope your problem will fix.
add white-space:nowrap for the label to use one line text. #num should be 'block' css with specific width like 200px and display block. thanks
I want:
.parent has height based on content, but with max-height
children have height based on content
.second has height based on content, but with respect to .parent max-height
But IE do problems. Other browsers work good.
HTML:
<div class=buggedFix>
<div class=parent>
<div class=first>...</div>
<div class=second><div class=big>...</div></div>
<div class=third>...</div>
</div>
</div>
CSS:
/*.buggedFix{display:flex;}*/
.parent{display:flex;flex-direction: column;width:250px;max-height:200px;}
.first{background:pink;flex: 0 1 auto;}
.third{background:yellow;flex: 0 1 auto;}
.second{background:brown;flex: 1 1 auto;overflow: auto}
.big{background:red;height:600px;margin:10px}
Bad 1: https://jsfiddle.net/fpnjwp0j/3/
Bad 2: https://jsfiddle.net/j53ds1mb/3/
Change the first and third rule's flex-shrink value to 0
Updated fiddle
Stack snippet
.buggedFix {
display: flex;
}
.parent {
display: flex;
flex-direction: column;
width: 250px;
max-height: 200px;
}
.first {
background: pink;
flex: 0 0 auto; /* changed */
}
.third {
background: yellow;
flex: 0 0 auto; /* changed */
}
.second {
background: brown;
flex: 1 1 auto;
overflow: auto
}
.big {
background: red;
height: 600px;
margin: 10px
}
<div class=buggedFix>
<div class=parent>
<div class=first>This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. </div>
<div class=second>
<div class=big>parent max-height is ignored!</div>
</div>
<div class=third>This is OK. This is OK. This is OK. This is OK.</div>
</div>
</div>
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;
}
I'm trying to use flexbox to place two images in a column. In this case, the width of the div container is smaller than the width of the image. In Chrome the image perfectly fits into the div container, but it doesn't in IE, and I don't know why.
div.outer {
width: 400px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
div.inner {
width: 100%;
border: 1px solid red;
}
img {
width: 100%;
height: auto;
}
<div class="outer">
<div class="inner">
<img src="http://placehold.it/480x360">
</div>
<div class="inner">
<img src="http://placehold.it/480x360">
</div>
</div>
https://jsfiddle.net/Yifei/16cpckqk/
This is what I've got in IE 11:
IE11 seems to have some trouble with the initial value of the flex-shrink property. If you set it to zero (it is initially set to 1), it should work:
div.outer {
width: 400px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
div.inner {
flex-shrink: 0;
width: 100%;
border: 1px solid red;
}
img {
width: 100%;
height: auto;
}
<div class="outer">
<div class="inner">
<img src="http://placehold.it/480x360">
</div>
<div class="inner">
<img src="http://placehold.it/480x360">
</div>
</div>
The accepted solution destroyed my sticky footers in ie. So I solved this disturbing issue with the following non satisfying "only for ie JS"... . The px value instead the "height:auto" did the trick for me.
if(fuBrowser =='ie'){
var img = $("#teaser img");
img.each(function() {
$( this ).css({height: $( this ).height()});
});
}
Using display: flex solves many problems, however, I can't create some auto-resizing textarea with it, but it works with <div contenteditable="true"></div>. I want to know why it doesn't work with textarea and if there's another way to solve this without using Javascript.
HTML with <div contenteditable="true">:
<div id="flex">
<div id="space"></div>
<div contenteditable="true"></div>
</div>
HTML with <textarea>:
<div id="flex">
<div id="space"></div>
<textarea></textarea>
</div>
CSS for both:
#flex {
display: flex;
height: 90vh;
background-color: #f99;
flex-direction: column;
}
#space {
background-color: #ff9;
flex: 2;
}
textarea,
div[contenteditable="true"] {
min-height: 30px;
max-height: 50vh;
overflow: auto;
resize: none;
}
Demo 1 — Demo 2