This question already has answers here:
Textarea to fill a parent container exactly, with padding
(4 answers)
Closed 4 years ago.
I would like a textarea inside a fieldset to expand to the full width:
HTML
<fieldset>
<legend>Legendary</legend>
<textarea>I'm supposed to fill the fieldset, but the padding/margin isn't the same.</textarea>
<div></div>
</fieldset>
CSS
textarea{width: 100%;}
https://jsfiddle.net/gL8bjtv9/4/
However, the left/right gaps (padding/margin) between the elements are different (Firefox, Chrome).
Why does this occur, and how can it be fixed?
Also: if I change the textarea's width from "100%" (1588px computed) to "1588px" in Firefox's Inspector, it seems OK.
Solution (browser-specific rules): https://stackoverflow.com/a/6796064/1619432
box-sizing: border-box;
Seems to work for Firefox, too.
Mozilla web docs explains box-sizing best: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
You can also play around with their great box-sizing visual tool to assist in understanding the CSS property better.
You could try doing this
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
or just adjust the rows attribute till it fits
<textarea rows="10" cols="4">I'm supposed to fill the fieldset, but the padding/margin isn't the same.</textarea>
Related
I would like to make a text element have a border around it like this in an upcoming ghost dashboard: Ghost blog
I have done this:
border: 10px solid #ffffff;
however that works for the height but not the width. The width is a lot wider. I know I could set the width to something however I would like the width to update when the text is changed, so there is always a certain amount of space between the text and box on each side.
I'm not sure how to do this or if it needs JS or if it can be done with pure CSS.
You are going to want to use padding and display:inline-block; on a span element in order to do this. For example:
HTML
<span>GHOST</span>
CSS
span {
padding: 10px;
border: 10px solid white;
display: inline-block;
}
This will allow the border around the text to shrink and grow depending on the length. It will also keep 10px of space between the border and the letters no matter the size.
Here is a fiddle: http://jsfiddle.net/ZDzn2/
If I understood you correctly, you want the border-width to be included in the css-width?!
you should then try the box-sizing attribute via CSS:
box-sizing: border-box
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
[Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing]
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
[Source: http://css-tricks.com/box-sizing/]
Go to http://kennethhedegaard.com/html2/index.html
Try to resize the window.
Can't figure out why the textarea is not scaling...
Kenneth
You should read this to make your textarea filling properly its parent.
In the code you posted the textarea has 100% width and padding which, with default values, means that you are going over with the padding. Moreover the div which contains the textarea has overflow set to hidden and that's why you cant se right border
EDIT (in case link suddently dies):
You have to add this class or rules to your textarea:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Cheers
According to the standard, adding padding to a HTML element in CSS will grow the element by the amount defined. For example:
.elem {
width: 100px;
height: 100px;
padding: 20px;
}
will add 20 pixels to the .elem's sides, causing the actual width and height to be 140px total.
Since this is actually pretty impractical in web design (having to calculate and keep track of the resulting sizes), I was wondering if it was somehow possible to do the reverse instead. I set a padding, and the inner text area shrinks instead. So the element stays at 100*100px, has the padding of 20px inside it, and I don't have to worry about messing up my design while experimenting with the padding.
Is this possible? Perhaps through a language that compiles to CSS (haven't looked into that much)? And perhaps a more minor question: why does it work this way in the first place?
Use box-sizing:
elemSelector {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
This value for the property declares that the declared size of the element will include the border and the padding.
References:
box-sizing at: 'CSS Basic User Interface Module Level 3 (CSS UI)'.
box-sizing at MDN.
It is currently impossible to perform what you are after. You'll have to account for padding in total width before you attempt to define what your css 'width' value will be. For more information on this, see the CSS Box Model. This is the only method to guarantee correct sizing in all web-capable devices, CSS3 compatible and not.
Please help me fix this issue. I would like to set the width of INPUT and TEXTAREA elements to 100% so that they entirely fit the table cell but I noticed that the right border is truncated.
I tried to wrap the INPUT inside a DIV and set 'overflow' to 'hidden' as I read on other answers but it does not work:
<div style="overflow:hidden">
<input class="input_field" type="text" />
</div>
I also set margins and paddings, and width=95% too but the right border is always truncated even if it is well inside the TD.
Please see the HTML and CSS code at jsFiddle. Look carefully to the right border of the elements, you will see they are truncated. Set 'table border=0' to see better.
Use box-sizing: border-box (and the corresponding browser-specific versions):
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
See http://jsfiddle.net/trwut/4/
Related reading: http://paulirish.com/2012/box-sizing-border-box-ftw/
The CSS specification states that the width of an element does not include the border; which could be argued as wrong and complicates the width in scenarios like yours.
Funnily enough, Internet Explorer went against this CSS specification and used what was known as the box model (width including the border) - which caused a headache at the time, but can now be applied to other browsers using the following CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
To support my answer (as the upvote was removed), you can read the following article:
Revenge of the IE Box Model by Jeff Kaufman
When assigning some HTML elements (like a form input) 100% width - you can no longer apply any additional styles that might effect the width. Things like border or padding will cause the element to exceed 100%. This results in awkward elements that may be outside of their parent elements.
Since CSS doesn't support width: 100% - 2px; The only way I know around this is to use an absolute pixel width (width: 98px) or chop the element off at 100% which is not really an option.
<div style="overflow:hidden;">
<input style="width:100%; border: 1px solid #000;" />
</div>
Are they're any other ways around this?
Along with adding another div, the solution will soon be to use CSS 3 to add the box-sizing attribute to the CSS rules. This new CSS 3 value already works in IE 8 and all other browsers - so if you don't mind skipping IE 6 & 7 you can use it now!
textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
You can make a container that's 100% without chrome (borders, padding), and then place a block element within, with whatever chrome you want - a block element will fill-up the total width by default.
<style>
.container {width:100%;border:0:margin:0;}
.thingy {border:1px solid black;margin:2px;background:#ddd;}
</style>
<div class="container">
<div class="thingy">
Both worlds?
</div>
</div>
This is an old question, but it's worth mentioning that since CSS3, you can use calc:
width: calc(100% - 2px);