Related
I have the following CSS and HTML snippet being rendered.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"></textarea>
</div>
Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent?
Why not forget the hacks and just do it with CSS?
One I use frequently:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
See browser support here.
The answer to many CSS formatting problems seems to be "add another <div>!"
So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
let's consider the final output rendered to the user of what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.
The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support.
In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).
The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to.
Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.
Taking a look at the W3C specifics other advantages we may notice are:
no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.
See W3C specifics for more detailed information.
Simple example:
.container {
width: 400px;
border: 3px
solid #f7c;
}
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want.
I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.
If you're not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Not perfect, but you'll get some padding and the width adds up to 100% so its all good
I came across another solution here that is so simple: add padding-right to the textarea's container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.
The container's padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
<textarea></textarea>
</div>
This table hack code works for me in all browsers from IE8+
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
I was looking for an inline-styling solution instead of CSS solution, and this is the best I can go for a responsive textarea:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
The problem lies in the box-sizing property.
By default, the initial value of the box-sizing property is content-box.
so you have something like this under the hood:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
box-sizing: content-box;
}
box-sizing: content-box; means that the width of the actual element is equal to the width of the element's content box.
so when you add padding (in this case padding-right and padding-left --> because we are talking about width) and border (in this case border-right and border-left --> because we are talking about width), these values get added to the final width. so your element will be wider than you want.
set it to box-sizing: border-box;. so the width will be calculated like so:
horizontal border + horizontal padding + width of content box = width
in this case, when you add horizontal border and horizontal padding, the final width of element does not change, in fact, the content box will shrink to satisfy the equation.
You can make use of the box-sizing property, it's supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
If you pad and offset it like this:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
the right side of the textarea perfectly aligns with the right side of the container, and the text inside the textarea aligns perfectly with the body text in the container... and the left side of the textarea 'sticks out' a bit. it's sometimes prettier.
For people who use Bootstrap, textarea.form-control can lead to textarea sizing issues as well. Chrome and Firefox appear to use different heights with the following Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Or if you want to give the textarea a border:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
How about negative margins?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
The value of the padding has a role to play. Using the style you posted:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
The width is already filled up and you have padding left, right to be 3px. So there will be an overflow.
If you change your style to this:
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding: 3px 1%;
}
What my styling is doing now is it has a width of 98% and its remaining 2% to complete a 100% and that is why I gave padding left 1% and padding right 1%. With this, the issue of overflow should be fixed
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 1 year ago.
Now im having an input text element which be warpped by a div container (form-group)
And i set the width to the input text element become 100% (width: 100%). And i expect that the input text it will cover the entire width of the form-group div element. And the result is kinda weird to me. The input text, it likes it flow out of the form-group element, like the this picture here:
In this picture, im currently hover the form-group element, and you can see the orange part, is the margin of the it, but you can see, the input text element, the part i highlighed is like overlaying the margin of the form-group element, which proved that the input text element is flow out of the container element of it, which is the form-group element. And that's weird, at least to me, because I set the width to 100%, and so i think it should be cover the container element of it. Please help me to understand this.
I know i can use the overflow property to fix but, i want to know why this is happening, so hopefully, someone can help me with this, thank you so much.
.form-container {
background-color: black;
padding: 20px;
}
.form-group {
width: 50%;
font-size: 1.5rem;
background-color: red;
margin: 3rem auto;
display: block;
}
input {
padding: 1.5rem 2rem;
border-radius: 2px;
border: none;
outline: none;
width: 100%;
color: var(--primary-color);
}
<form action="#" class="form-container">
<div class="form-group">
<input type="text" placeholder="Enter text...">
</div>
</form>
This happens because by default the box-sizing property is content-box.
When you add padding to the input element, the input element size remains equal to the size of form-group div.
But, this increases the overall width of the input element and extends it outside as the padding adds up to the total width. It looks like the actual width of the input element has increased but actually just the padding is adding.
You can change this if you wish to, by changing the box-sizing to border-box. This way the padding gets added to the input element by compromising the actual size of the input element.
input {
box-sizing: border-box;
padding: 1.5rem 2rem;
border-radius: 2px;
border: none;
outline: none;
width: 100%;
color: var(--primary-color);
}
Also, after adding border-box, you can try adding some height to the form-group div to visualize their comparative heights.
Use this developer tool on your browser to help you see the width, padding and margins.
You are coming up against box-sizing.
The input has quite a noticeable padding added to it (3rem horizontally in all). While the basic element takes up the width of its parent on the width: 100% setting, the box-sizing is set to content by default in CSS. This means any padding (and borders) is outside the basic size.
Changing the box-sizing to border-box for the input means that the padding is included within the overall size so you get the width you expect - in total 100% of the parent:
input {
padding: 1.5rem 2rem;
border-radius: 2px;
border: none;
outline: none;
width: 100%;
color: var(--primary-color);
box-sizing: border-box; /* ADD THIS */
}
In html every elements have default padding and margin property..we overlapped this values.
use following code..to avoid these kind of issues.
* {
padding: 0px;
margin:0px;
box-sizing:border-box;
}
I am trying to display a four grid with different items for my web, however now all children divs have the same size:
<div class="container">
<div class="grid4">
<input type="submit" name="input1" value="input1"/>
</div>
<div class="grid4">
<input type="submit" name="input2" value="input2"/>
</div>
<div class="grid4">
<input type="submit" name="input3" value="input3"/>
</div>
<div class="grid4 no-border">
<input type="submit" name="input4" value="input4"/>
</div>
</div>
CSS:
.container {
width: 100%;
margin: 30px 0 30px 0;
}
.grid4 {
width: 25%;
padding: 20px;
border-right: 2px solid rgba(40,40,40,0.8);
display: inline;
}
.no-border {
border: none;
}
I tested it in jsfiddle and they indeed have the same size:
http://jsfiddle.net/ME7k8/
However, you can clearly see that the last chil div is smaller:
Why?! Any help?
edit In case it is too small in the image:
elemento {
}
.grid4 {
width: 25%;
padding: 20px;
border-right: 2px solid rgba(40, 40, 40, 0.8);
display: inline;
}
div {
text-align: left;
}
body, div, td {
font-family: 'Noto Sans',Arial,Helvetica,sans-serif;
font-size: 12px;
color: #666;
}
Inherited from body
body {
text-align: center;
}
edit I checked again with the browser inspector and I can see that the first div is about 50% of the .container div. It has exactly the same css properties than the rest of the divs.
The 3 first divs are wider than the last due to:
1. They have the CSS display:inline (meaning their width gets effected by white-spaces, line breaks etc).
2. The last div has no border unlike the first 3.
Give them identical width
So what you need to do to make sure all 4 divs have the same width is removing all white-space between the submit buttons and their parent divs, and also add padding-right:22px; to the last div (if you want the 4 divs exactly identical wide).
jsFiddle demo.
I use your jdFiddle and put a blue background to see the difference, all divs have the same size, however, I declare a size for the container
.container {
width: 1200px;
background-color: tomato;
}
and re adjust the size of the divs with the grid4 attribute
.grid4 {
display: block;
float: left;
width: 20%;
padding: 2.3%;
border-right: 0.2% solid rgba(40,40,40,0.8);
display: inline;
background-color: blue;
}
when you put padding to each one (20px) that pixels are added to the "25%" of total size.. so this make it a bigger element, and probably that's the difference you couldn't see... with that on mind, may be you could solve your problem... Check This...
Your last element has no border, while the others probably do.
Borders take up space, as do margin and padding.
Check out the box model by pressing ctrl + shift + i in your browser and hovering over an Also,
http://www.w3schools.com/css/css_boxmodel.asp
From inside to outside, there is padding, borderin, margin, outline.
The first three add size to your "box model". Outline does not.
If you specify a width or height, any padding, border, or margin will make your element not that specified width or height anymore. Needless to say, this makes for all kinds of headaches
One solution around this is to use box-sizing: border-box;
This makes specified padding and border actually be your specified width or height. Margin will still add to the dimension, which makes sense if you think about it.
http://css-tricks.com/box-sizing/
Also be sure to take care of prefixes so that it works on all browsers.
You may not want to deal with this at this point, but check out the example in the last link, as well as caniuse.com.
If you don't want to handle cross browser support manually, there is a library to automatically post-process your CSS to add the appropriate prefixes. This uses the caniuse.com database so as long as you update this library, your post-processed css file will have the up to date prefixes without you having to worry about keeping up with browser versions or individual css feature deprecations.
https://github.com/ai/autoprefixer
article on auto prefixing
http://css-tricks.com/autoprefixer/
I have an html element that is contained within a div. Height are dictated by the outer div and the height and width of the input control are 100%. At the most basic level, I am having an issue where the textbox extends past the right of the containing div.
Basic example code:
<div style="height:25px; width: 150px;">
<input type="text" style="height:100%; width:100%" />
</div>
The rendering of this control is far more complex than this, but still when the control is stripped down to this level, I have an issue where the textbox sticks out past the containing div.
You can use box-sizing:border-box to take care of this. Just put the following in your css file:
input{box-sizing:border-box}
It means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container.
Paul Irish has really good post explaining this technique http://paulirish.com/2012/box-sizing-border-box-ftw
The points he makes about padding also apply for the border.
There's even a compass mixin to make it easier to support older browsers. (http://compass-style.org/reference/compass/css3/box_sizing/)
This did the job for me :
input {
padding: 0.2em;
box-sizing: border-box;
width: 100%
}
Try to give input width : 100%; box-sizing: border-box;
unfortunately this will depend on the browser you are working with but setting the width of the object (the textbox) does not take into account the width of the border on the object. most browsers only take into consideration any padding from the outer object and margins from the contained object but a few (i'm looking at you IE) do not add in the border when calculating percentages;
your best bet is to change the border on the textbox or to throw in another div between teh textbox and the container with a padding of say 2px with a margin-top: -2px and a margin-left:-2px (i'm guessing at the border width)
I'm assuming that you want the contained element (<input>) to be smaller than, or contained entirely within, the <div>?
You can either:
input {width: 50%; /* or whatever */ }
An html-element's width is calculated (I think) as the defined width + borders + margin + padding
If you've already defined the input as having 100% width of the parent, and then the other attributes are added it will definitely overflow the parent div.
You can set the margin/padding/borders to 0, but that would likely not look good. So it's easier, though not necessarily perfect, just to use a suitably-smaller width.
You could, of course, use
#parent_div {overflow: hidden; /* or 'auto' or whatever */}
to hide the portion of the input element that would normally overflow the container div.
Please apply the following css to your input elements.
{
box-sizing: border-box;
width: 100%;
}
if you use bootstrap or other css library, it will be not problem.
I know this post is fairly old, but it's a common problem and no one posted any good answers...
The following HTML code looks fine. But when I add the doctype, the problem appear
div.field_container
{
height: 25px;
width: 150px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>
To fix the width / height problem, you can add padding to your field_container, but that will make the container bigger.
div.field_container
{
height: 25px;
width: 150px;
padding-bottom: 6px;
padding-right: 4px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>
If you can't change the container width, you can also use the following trick, but that will still increase the height
div.field_container
{
height: 25px;
width: 150px;
padding-bottom: 6px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div>
</div>
Instead of applying the style directly on the input element, maybe abstract the CSS into a file and use classes:
div.field_container
{
height: 25px;
width: 150px;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>
I am running out the door before I could test if this helps at all, but at the very least, you could play with max-height/width settings on the DIV css to make it not break if my solution doesn't work. And having the CSS abstracted like this makes problems easier to solve using a plugin like Firebug in Firefox.
Question though, is there a need to enclose the input tag in it's own DIV? I wouldn't be surprised if there is just a better layout you could build that would avoid the need to do this...
I have the following CSS and HTML snippet being rendered.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"></textarea>
</div>
Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent?
Why not forget the hacks and just do it with CSS?
One I use frequently:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
See browser support here.
The answer to many CSS formatting problems seems to be "add another <div>!"
So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
let's consider the final output rendered to the user of what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.
The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support.
In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).
The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to.
Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.
Taking a look at the W3C specifics other advantages we may notice are:
no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.
See W3C specifics for more detailed information.
Simple example:
.container {
width: 400px;
border: 3px
solid #f7c;
}
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want.
I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.
If you're not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Not perfect, but you'll get some padding and the width adds up to 100% so its all good
I came across another solution here that is so simple: add padding-right to the textarea's container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.
The container's padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
<textarea></textarea>
</div>
This table hack code works for me in all browsers from IE8+
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
I was looking for an inline-styling solution instead of CSS solution, and this is the best I can go for a responsive textarea:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
The problem lies in the box-sizing property.
By default, the initial value of the box-sizing property is content-box.
so you have something like this under the hood:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
box-sizing: content-box;
}
box-sizing: content-box; means that the width of the actual element is equal to the width of the element's content box.
so when you add padding (in this case padding-right and padding-left --> because we are talking about width) and border (in this case border-right and border-left --> because we are talking about width), these values get added to the final width. so your element will be wider than you want.
set it to box-sizing: border-box;. so the width will be calculated like so:
horizontal border + horizontal padding + width of content box = width
in this case, when you add horizontal border and horizontal padding, the final width of element does not change, in fact, the content box will shrink to satisfy the equation.
You can make use of the box-sizing property, it's supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
If you pad and offset it like this:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
the right side of the textarea perfectly aligns with the right side of the container, and the text inside the textarea aligns perfectly with the body text in the container... and the left side of the textarea 'sticks out' a bit. it's sometimes prettier.
For people who use Bootstrap, textarea.form-control can lead to textarea sizing issues as well. Chrome and Firefox appear to use different heights with the following Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Or if you want to give the textarea a border:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
How about negative margins?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
The value of the padding has a role to play. Using the style you posted:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
The width is already filled up and you have padding left, right to be 3px. So there will be an overflow.
If you change your style to this:
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding: 3px 1%;
}
What my styling is doing now is it has a width of 98% and its remaining 2% to complete a 100% and that is why I gave padding left 1% and padding right 1%. With this, the issue of overflow should be fixed