What's the reason the inputs do not align with the button and other elements?
Layout (Firefox Developer Edition) shows that the sizes of input and label elements differ even though they are in the same div.
What causes this? And how to align them in an elegant way (without changing margin through trial and error for example)?
Relevant section of NewTransaction.js file:
CSS file of NewTransaction:
SOURCE CODE: https://github.com/yanichik/react-course/tree/main/full-course/expense-tracker-v2
Because the input element has padding of 2px on both left and right, and as default in user agent stylesheet, box-sizing is set to content-box.
content-box gives you the default CSS box-sizing behavior. If you set
an element's width to 100 pixels, then the element's content box will
be 100 pixels wide, and the width of any border or padding will be
added to the final rendered width, making the element wider than
100px.
You should use box-sizing: border-box to overcome this issue.
Reference: https://www.w3schools.com/css/css3_box-sizing.asp
Your updated code: https://codesandbox.io/embed/expense-tracker-yan-forked-80tfk?fontsize=14&hidenavigation=1&theme=dark
It's better to normalize the styles,
in your code the style that made problem was box-sizing, I just set for all element to border-box, however you can just add box-sizing: border-box; to input and it works too.
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.form {
margin-top: 15px;
}
input {
display: flex;
width: 100%;
}
label {
display: flex;
justify-content: flex-start;
}
button {
display: block;
width: 100%;
margin-top: 5px;
background-color: purple;
border-color: purple;
color: white;
font-weight: bold;
}
.amount,
.description {
/* display: flex; */
flex-direction: column;
margin-bottom: 5px;
margin-top: 5px;
}
<div className="form">
<form onSubmit={submitHandler}>
<div class='description'>
<label htmlFor="description" pointing="true">
Description
</label>
<input type="text" id='description' placeholder="Type Something" ref={descrRef}/>
</div>
<div class='amount'>
<label htmlFor="amount" pointing="true">
Amount
</label>
<input type="number" id='amount' step="0.01" placeholder="$" ref={amountRef} />
</div>
<div>
<button type="submit">Add Transaction</button>
</div>
</form>
</div>
Related
I need to fill a div element with a button and input. The button'll have the exact width and fthe rest will be filled with the input. In my code I can't even set the width of the button and the input is always wider than the parent.
Then I'll set overlay: hidden to the .bar so that the input with the button look like I want. But for that to behave like I want, I need to set the mentioned widths correctly. So what could I do to fill this parent div with this button of exact width and input for the rest of its width but no more than that? I tried lots of properties, nothing helped. Only condition is, that I want display: flex remain in the code, everything else can be changed. Thanks for suggestions.
.container {
width:205px;
}
.bar {
border-radius: 25px;
box-sizing: border-box;
display: flex;
//overflow: hidden;
}
.bar_input {
font-size: 15px;
height: 20px;
box-sizing: border-box;
width: 100%;
}
.bar_button {
padding: 8px 8px 14px 1px;
width: 37px;
height: 35px;
left: 3px;
right: auto;
}
<div class="container u-l-fr" style="background-color: darkred">
<div class="container-bar" style="background-color: darkblue">
<div class="bar" style="background-color: gold">
<button aria-label="Search" class="bar_button" role="button" type="button" style="background-color: black;"></button>
<input class="bar_input" id="search_input" placeholder="Search">
</div>
</div>
</div>
Its because your container width is less than the default width that is assigned to a <input> element. So you can either increase width of your container or use this code.
.bar_input {
font-size: 15px;
height: 20px;
box-sizing: border-box;
width: calc(100% - 37px);
}
Using bootstrap you can add class to the button .btn-block
Otherwise you can add style width: 100%; to the button
I'm using bootstrap input-append add-on to add a icon to the end of the input field. This all works nicely. The issue is setting a width of 100% on the input pushes the add-on span tag outside the parents "input-wrapper" div viewable area.
I'm using box-sizing: border-box; on all input fields.
the only way I can seem to make this work is setting the parent div "input-wrapper" to display: flex; Unfortunately this is not an option as it's not supported in IE8 or 9. What other options do I have.
http://jsfiddle.net/chapster11/zjx2zc6e/
Example code.
<div id="form-elements">
<div class="input-wrapper input-append">
<input id="paymentDate" class='paymentDate' type="text" />
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
CSS CODE
#form-elements{
margin: 20px;
}
input[type]{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-height: 30px;
}
#paymentDate{
height: 30px;
width: 100%;
}
.input-wrapper{
width: 600px;
border: 1px dashed red;
}
Edit: My bad, on Bootstrap2 there was an issue with the "input-block-level" feature working with addons (it works for all other inputs). A few people came up with some workarounds, mainly using a table display. You can see here:
https://jsfiddle.net/BMironov/BVmUL/
Here is the CSS that handles it - you may want to play around with the way the add-on span works.
.input-append.input-block-level {
display: table;
}
.input-append.input-block-level .add-on {
display: table-cell;
width: 16px;
}
.input-append.input-block-level > input {
box-sizing: border-box;
display: table;
min-height: inherit;
width: 100%;
}
.input-append.input-block-level > input {
border-right: 0;
}
Instead of setting the input to 100% width, add the class input-block-level to the text input. You shouldn't need any additional CSS, that functionality is built into Bootstrap 2.
It's obvious that if one of your nested element input is set with 100% width, your other nested element span will get outside the wrapper, which total width is being occupied by input.
Let's assume for a second I do not wish to use Bootstrap.
How do you achieve his perfect vertical alignment of the input with its button? When I do it the button vertically misaligns. I do not wish to use "hacking" on the top-margin to fix this as I'm afraid it won't look well on all browsers.
How is bootstrap achieving this magic?
my goal is something like this:
I think the answer would be using box-sizing: border-box, as bootstrap does. This works across all recent modern browsers:
<input type="text" placeholder="Your text here">
<button>Button</button>
input{
float: left;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button{
float: left;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
http://jsfiddle.net/4dgzbc3y/
You will have to use a container and display both as table cells (working jsFiddle):
Markup:
<div class="container">
<input type="text" placeholder="Your text here">
<div class="button">
<a>Button</a>
</div>
</div>
CSS:
.container{
display:inline-table;
vertical-align:middle;
}
input{
display:table-cell;
padding:5px;
}
.button{
display:table-cell;
background:gray;
padding:5px;
}
Note:
Keep in mind general things like both having the same font size and padding. To make it look slick you can round the outer corners same as in bootstrap :)
Have an input and button with explicit heights. The input and the button will need a comment between them to "connect" otherwise they will have na ugly space
.target {
height: 2em;
}
.target * {
height: 100%;
display:inline-block;
border:none;
outline:none;
}
.target input {
width:79%;
background-color:black;
padding-left: 5px;
}
.target button {
width:10%;
background-color: orange;
box-sizing: margin-box;
padding: 0; margin: 0;
border-top: 2px orange;
}
<div class="target">
<input placeholder="Foo" type="text"><!--
--><button>Bar</button>
</div>
I have a problem where setting width: 100% to inputs inside a container extends more than the container capacity. This problem doesn't seems to happen with buttons though:
<form>
<input type="text" class="input"></input>
<button>Button</button>
</form>
CSS:
form {
max-width: 200px;
border: 1px solid #eee;
}
.input, button {
width: 100%;
}
In this example, the button correctly fills the container, however the input extends a bit further:
How can I fix this?
I've created a codepen: http://codepen.io/jviotti/pen/qfFmH
You can fix this adding
.input, button {
width: 100%;
box-sizing: border-box; /* add this */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
box-sizing - https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I am trying to use input-append for the search input inside fluid row but unfortunately it does not seem to work correctly as it does not scale to full width of container.
Here is my example piece of code:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="input-append">
<input class="span12" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
</div>
</div>
</div>
But the input does not scale full width of span12. Does anyone know why this is happening or what am I missing?
Here is a jsFiddle: http://jsfiddle.net/persianturtle/SXcV3/
#appendedInputButton {
width:100%;
}
I also recommend you use the span12 class for the div that holds the input, and not on the input itself.
Update: since bootstrap adds some padding to their buttons for aesthetic reasons, I made the input button width 95% which looks better with no horizontal scroll bar.
Updated jsFiddle: http://jsfiddle.net/persianturtle/SXcV3/1/
for fixed width on the button you can use a different technique
.controls {
position: relative;
}
.input-append{
width: 100%;
}
.input-append input[type="text"]{
position: absolute;
width: auto !important;
margin-right: 42px;
left: 0px;
right: 0px;
}
.input-append button{
width: 42px;
float: right;
margin: 0px !important;
padding: 0px !important;
}
.input-append input[type="text"],
.input-append button{
height: 42px;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
-ms-box-sizing: padding-box;
box-sizing: padding-box;
}
There is unnecessary .row-fluid and .span12 div. Correct markup is
<div class="container">
<div class="input-append">
<input class="span12" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
</div>
Working fiddle
I usually try to solve the fluidity problems in Bootstrap by employing the border-box box-sizing model. Something like this recently worked for me:
.input-append{
width: 100%;
}
.input-append input[type="text"]{
width: 90% !important;
}
.input-append button{
width: 10%;
}
.input-append input[type="text"],
.input-append button{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Obviously you'll want to put this all within the scope of your form, but you get the idea.