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
Related
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>
Why is input element does not take up 100% of the width of its container automatically after changing its display to block? Are there some other factors which also have an influence on that? Thanks. Demo see below:
some explanation: 1. I comment out width:100% intentionally because block level element is supposed to take up 100% of its container width.
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
/*width:100%;*/
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
I'm not an expert, but I'm pretty sure it's because you have commented out width:100%. try decommenting that then it should work
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity:0.5;
width:100%;
}
Changed the code check now
#container {
width: 300px;margin: auto;
background-color: red;
}
input[type="text"] {
opacity:0.5;
width:100%;
border-width:0;
padding:0;
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
The input element by default has a border: 2px and a padding: 1px 0 in google chrome
When you were actually applying a width of 100%, the input actually had a width greater than the actual div outside covering it
width of input(set to width of div) + border + padding > width of div
There is a tiny little white area on the right, in case you uncomment width:100% in your code. That white area actually is the input. If you set the border to zero that's really enough to fix things
#container {
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"] {
display: block;
opacity: 0.5;
width: 100%;
border: 0
}
<body>
<section>
<div id="container">
<input type="text">
</div>
</section>
</body>
Default size of input is 20, so if you do not define size or css rule for your input automatically its size is 20.
The best solution is adding width.
try this code:
#container
{
width: 300px;
margin: auto;
background-color: red;
}
input[type="text"]
{
display: block;
opacity:0.5;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
If you want to be responsive it is better to add box-sizing to all element like this:
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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.
I have a textarea that i'd like to shrink in width: but no matter what I set the cols= parameter to, the textarea keeps its width. Why is this?
The code looks like
<textarea id="edit-submitted-question-request" name="submitted[question_request]" cols="10" rows="5" class="form-textarea required"></textarea>
and it can be found here:
http://quaaoutlodge.com/content/dinner-theatre-rock-romance
EDIT A
I commented out width: 100%; in .form-textarea-wrapper textarea in my css and now the textarea renders to the right size but the "resize bar" to extend the text area is still at 100%, why is this?
Found a class in your css that makes problems for your textarea size:
.form-textarea-wrapper textarea {
display: block;
margin: 0;
width: 100%; // <----- Thats the problem
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
width from that class is affecting on textareas. check your css file /system.base.css?nipcyw
you are using one div for the textarea in which you have set width as 100%, Please remove that width part then your cols=parameter will start working.
.form-textarea-wrapper textarea {
display: block;
margin: 0;
/* -------- width: 100%; ------- */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
I am displaying the html content in a table. For printing the tags i am using textArea in the <td> of the table. So i want to adjust the height and width of textArea so that it is equal to the <td>. How can i do this
dabblet.demo
the problem is that textarea behave not normal box-model, that's why we need this trick with box-sizing
this CSS will help you:
textarea {
border: none;
width: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
if you have no access to css file, you can use inline css
like this:
<textarea style="border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"> </textarea>
Try using this CSS:
td textarea {
width: 100%;
height: 100%
}
Or inline:
<td>
<textarea style="width: 100%; height: 100%; border: none">
</textarea>
</td>
give the textarea a 100% width and height style
td textarea {
width:100%;
height: 100%;
}
but also take into account the paddings and borders or the textarea so that it would not overflow from the td.
hope this helps.