I've got the following code:
.wrapper {
display: flex;
height: 25px;
}
.myInput {
width: 50px;
height: 100%;
border: 1px solid grey;
border-right: none;
}
.myInputAddon {
width: 25px;
height: 100%;
background-color: green;
border: 1px solid green;
}
<div class="wrapper">
<input class="myInput">
<div class="myInputAddon" type="number"></div>
</div>
I thought, when I give a hardcoded height to my wrapper div (in the example 25px) and then height: 100%; to his child-elements, they would flex correctly and have the same height.
But in my snippet, my input is higher than my div.
If I remove the height from the wrapper div and give the input a height 23px and to the child-div 25px, it works. But I would like to set it a little bit dynamically.
It should look like this:
How can I do this?
Thanks and cheers.
The problem is default padding of input element so you can just add box-sizing: border-box and keep padding inside height of element.
.wrapper {
display: flex;
height: 25px;
}
.wrapper * {
box-sizing: border-box;
}
.myInput {
width: 50px;
height: 100%;
border: 1px solid grey;
border-right: none;
}
.myInputAddon {
width: 25px;
height: 100%;
background-color: green;
border: 1px solid green;
}
<div class="wrapper">
<input class="myInput">
<div class="myInputAddon" type="number"></div>
</div>
The input element has default styling from the browser:
Make the following adjustments:
.wrapper {
display: flex;
height: 25px;
}
.myInput {
width: 50px;
height: 100%;
border: 1px solid grey;
border-right: none;
box-sizing: border-box; /* NEW; padding and border now absorbed into height:100% */
}
.myInputAddon {
width: 25px;
height: 100%;
background-color: green;
border: 1px solid green;
box-sizing: border-box; /* NEW */
}
<div class="wrapper">
<input class="myInput">
<div class="myInputAddon" type="number"></div>
</div>
Related
I'm making a custom that contains an , and my goal is to remove the natural outline/border from the and place it on the containing such that it still looks natural when focussed, however, it seems that I am not getting the natural outline appearance and instead it looks like the outline is placed on the outside of the div...
Natural input element
My custom div containing the input
Is there something that can be done to achieve the natural outline look?
I have used outline: 5px auto -webkit-focus-ring-color; for the styling on the <div>.
.container {
display: flex;
flex-direction: column;
width: 300px;
}
input, .two {
font-size: 20px;
border: 2px solid grey;
border-radius: 10px;
}
.one {
margin-bottom: 12px;
}
.two {
height: 25px;
}
.two:focus-within {
outline: 5px auto -webkit-focus-ring-color;
}
.three {
border: 0;
outline: 0;
width: 100%;
background: 0;
}
<div class="container">
<input class="one" />
<div class="two">
<input class="three"/>
</div>
</div>
You can try giving it a negative outline-offset such as outline-offset: -1px;
It's not pixel perfect, but it does look a bit more like built-in style outline on Chrome:
But do bear in mind that it might vary for different devices. For me -1px looks the best.
.container {
display: flex;
flex-direction: column;
width: 300px;
}
input, .two {
font-size: 20px;
border: 2px solid grey;
border-radius: 10px;
}
.one {
margin-bottom: 12px;
}
.two {
height: 25px;
}
.two:focus-within {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.three {
border: 0;
outline: 0;
width: 100%;
background: 0;
}
<div class="container">
<input class="one" />
<div class="two">
<input class="three"/>
</div>
</div>
The proper solution might be using box-sizing: border-box;, which border width is also counted for width and height. So you don't need to do anything to make them look identical.
But it seems not working for Safari.
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
width: 300px;
}
input, .two {
font-size: 20px;
border: 2px solid grey;
border-radius: 10px;
}
.one {
margin-bottom: 12px;
}
.two {
height: 30px;
}
.two:focus-within {
outline: 5px auto -webkit-focus-ring-color;
}
.three {
border: 0;
outline: 0;
width: 100%;
background: 0;
}
<div class="container">
<input class="one" />
<div class="two">
<input class="three"/>
</div>
</div>
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
I use the above code to display a big div with two divs in it. For the first one I use position: absolute to place it on bottom left of the div.
How can I extend the height of the second gray one so that it's 5 pixels above the first, but without having to measure its exact height in pixel (like the pic below)? I can set height: 50px; for example but is there another way?
I would use a flexbox approach rather than absolute positioning (comments in css below)
div.div1 {
display: flex;
flex-direction:column;
/* add the above styles*/
border: 1px solid black;
min-height: 100px; /*I would also change this to min-height otherwise it may cause issues if your text goes to 2 lines*/
width: 100px;
padding: 10px;
}
div.div2 {
flex-grow:1; /* make div grow to fill the space */
margin-bottom:5px; /* minus the amount of margin you wanted */
background-color: gray;
border: 1px solid black;
padding: 10px;
}
div.div3 {
/* remove absolute positioning */
border: 1px solid red;
height: 20px;
width: 20px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
EDIT: I suggest that, if you can focus on the modern browser features, going the flexbox way as shown by Pete is definitely a cleaner approach than the ones I've shown bellow. That being said, here are the alternatives:
You can use calc to dynamically determine the height of div2:
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(
100%
- 20px /* div1: padding top and bottom */
- 2px /* div1: border top and bottom */
- 20px /* div3: height */
- 2px /* div3: border top and bottom*/
- 5px /* desired separation*/
);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
You can avoid including padding and border width in your calculations if you set the box-sizing for your divs to border-box (You might want to set this for all elements):
div {
box-sizing: border-box;
}
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(
100%
- 20px /* div3: height */
- 5px /* desired separation */
);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
There's this rather new, hip CSS property called 'flex' which you're now going to love because it does it exactly that without the need of positioning absolute etc. I did something similar yesterday where I had a vertical nav bar and I wanted one menu at the top and one at the bottom. In a responsive environment; using your approach of positioning absolute it would've resulted in a nasty mess of working out heights to stop the content from overlapping. Flex prevented this! Yeyyyyy
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In your example you want to do something like this:
.div1 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}
.div2 {
align-self: flex-start;
flex-grow:1;
width:100%;
}
.div3 {
align-self: flex-end;
width:100%;
}
Now your div 3 will always be at the bottom. Although now .div3 will extend the entire width so within the div insert your content and BOOM done.
You can use calc on the heightsetting as in my snippet below. That setting is 100% minus (20 + 10 + 2) for the height, border and bottom of the lower DIV minus (5 + 2) for the distance and the border of the first DIV minus 10px for the padding of the parent, summing up to 49px .
div.div1 {
position: relative;
border: 1px solid black;
height: 100px;
width: 100px;
padding: 10px;
}
div.div2 {
background-color: gray;
border: 1px solid black;
padding: 10px;
height: calc(100% - 49px);
}
div.div3 {
position: absolute;
border: 1px solid red;
height: 20px;
width: 20px;
bottom: 10px;
left: 10px;
}
<div class="div1">
<div class="div2">Test 123</div>
<div class="div3">A</div>
</div>
https://jsfiddle.net/3Lthpf72/5/
Html css with jsfiddle ex: not working: vertical align and using full width based on width percentage of two child containers
When I make the two child containers add up to the parent width percentage, it folds down. Also the vertical align middle is at the bottom, not the middle.
Any thoughts?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
}
.list-item-content {
display: inline-block;
border: 1px solid blue;
width: 80%
}
.payee.list-item>img {
border: 1px solid green;
height: 45px;
display: inline-block;
width: 17%;
vertical-align: middle;
}
<div class="payee list-item">
<img src="/Image/PayeeBillPayAccountPortrait/832">
<div class="list-item-content">
<h4>Colonel Sanders!</h4>
<h3>Colonel Sanders</h3>
</div>
</div>
Are you trying to do something like that?
.payee.list-item {
border: 1px solid red;
height: 100%;
width: 300px;
display: inline-block;
position: relative;
}
.list-item-content {
float: right;
border: 1px solid blue;
width: 80%
}
h3, h4 {
width: 50%;
float: left;
box-sizing: border-box;
padding: 6px;
}
h3{background: lightgray;}
h4{background: gray;}
.payee.list-item>img {
border: 1px solid green;
max-height: 45px;
width: 17%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="payee list-item">
<img src="https://static.pexels.com/photos/6555/nature-sunset-person-woman.jpg">
<div class="list-item-content">
<h3>Colonel Sanders</h3>
<h4>Colonel Sanders!</h4>
</div>
</div>
I have to create two <textarea>s in two different <div>s and both are have to come in single line. And both <textarea>s have to occupy 100% width (50% by each) in all types of screen.
However, when I am trying the second <textarea>, the right side is overflowing and even I am not able to manage right margin (in CSS) for <textarea>. How can I avoid right overflow for <textarea>?
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 10px 10px 10px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
Note the change in margin to textarea. That should do it!
.container {
background-color: lightblue;
border: 5px solid black;
min-height: 500px;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
margin: 10px 0px 10px 0px;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<div class='left'>
<textarea>left</textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
you have to remove margin from your textarea because margin calculated form the outer width of the element , you can use padding to .conatiner instead.
and add a box-sizing attribute to remove the border width from the calculate width
html,body,.container{
height:100%;
margin:0;
}
.container{
background-color: lightblue;
border: 5px solid black;
padding:10px;
display: table;
width: 100%;
box-sizing: border-box;
}
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
box-sizing: border-box;
}
.left{
display: table-cell;
width:50%;
height: 100%;
}
.right{
display: table-cell;
width:50%;
height: 100%;
}
<html>
<body>
<div class="container">
<div class='left'>
<textarea>left </textarea>
</div>
<div class='right'>
<textarea>right</textarea>
</div>
</div>
</body>
</html>
Remove margin from your textarea because margin calculated form the outer width of the element, and give display: table; to container.
Remove margin. Because you are assigning 50% to each left and right textarea. so your total width will be 100%+10px; so it will overflow on x-axis
textarea {
width: 100%;
height: 100%;
border: 3px none #cccccc;
border: 1px solid black;
}
You can use iframes for that. If you use iframes you can fit the overflow to hidden both left and right side
Best way to demonstrate what I want is to show it:
I want the left and right div to expand to the left and right edge of the container div automatically.
It can be done with Javascript and with flex but I'm wondering is there is another way that supports IE9+ (flex is IE11+)
I created this live demo (click "Run with JS") with a dynamically changing center div (since the "real life" problem doesn't have a static size)
Using a display: table-cell would make it easy for you.
Demo: http://jsfiddle.net/abhitalks/VytTX/1/
HTML:
<div class="outer">
<div id="left" class="inner"></div>
<div id="center" class="inner">...</div>
<div id="right" class="inner"></div>
</div>
CSS:
body { width: 100%; }
div.outer {
width: 90%;
border: 1px solid gray;
background-color: rgb(12, 34, 43);
text-align: center;
display: table;
border-spacing: 10px;
}
div.inner {
border: 1px solid gray;
height: 200px;
display: table-cell;
min-width: 20px; width: 20px;
padding: 4px;
background-color: rgb(212, 234, 143);
}
You could achieve that like this :
An example: http://codepen.io/srekoble/pen/rugxh (change the variable of the center width $width)
It's a sass file for a variable usage:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.outer {
width: 100%;
border: 1px solid gray;
background-color: rgb(12,34,43);
text-align: center;
margin: 0 auto;
font-size: 0;
}
div.inner {
border: 1px solid gray;
height: 200px;
display:inline-block;
min-width: 20px;
}
$width: 50%;
#center {
width: $width;
background: red;
}
#left,
#right {
width: ( 100% - $width ) / 2;
background: yellow;
}
<style>
body
{
background: #0B222A;
}
.outer
{
width: 400px;
height: 300px;
background: #D3EA8F;
margin: auto;
}
.inner
{
width: 60%;
height: 300px;
background: #D3EA8F;
border-left: solid 10px #0B222A;
border-right: solid 10px #0B222A;
margin: auto;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>