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
better way of making a vertical divider in a centre of 2 divs. I want the divider to be in middle the "why choose" and "gallery"
like my example
This is what I've tried but if you have a better solution than this that'd be great. Giving 75px padding seems ok but I don't think its the best practice.
.why-choose-us{
padding: 0 10px;
width: 500px;
float: left;
ul li{
list-style-type: none;
margin-left: -30px;
line-height: 2;
clear: both;
}
}
.gallery{
width: 400px;
float: left;
padding-left: 75px;
border-left: 1px solid #c1c1c1;
img{
border-radius: 3px;
padding: 5px
}
}
So if divs are 400px each then few more px are still available for the divider, so let say .
http://jsfiddle.net/21g2Lona/1/
May be use CSS multicolumn layout?
-webkit-column-count: 2;
You would just need to place all the markup in one column, let the CSS create the separator for you.
PS: You would need to use appropriate vendor prefixes along with -webkit.
I am a huge fan of the CSS flexbox module for these kinds of layouts. You can read about it here. It's currently supported by 86% of the browsers people use according to http://caniuse.com/#feat=flexbox.
To make it show up correctly in all browsers you can use fallbacks and prefixes.
However, your solution is also fine. I just would use margin instead of padding if you're doing it this way. And of course, using float for these kinds of major layouts can lead to many problems and could require lots of additional CSS rules to fix.
I'm a fan of using box-sizing: border-box sizing whenever you need to divide a page vertically and include padding, margings, or borders.
The default box-sizing is content-box which will apply the width rule only to the content of the element--if borders, padding, or margin are added they will be in-addition to the width. border-box changes this so the width rule applies to the entire element--if borders, padding, or margin are added they will not increase the element's size, but rather consume space within the element.
Here's an updated Fiddle: http://jsfiddle.net/21g2Lona/5/
Here's the salient bits:
section {
float: left;
padding-left: 10px;
width: 50%;
box-sizing: border-box;
}
.gallery{
float: left;
border-left: 1px solid #c1c1c1;
...
}
The section rule does pretty much everything but add the border. The key bit is the combination of box-sizing: border-box and width: 50%. Together they mean that each <section> will be 50% of the width of their parent element, and that their width includes their border, margin, and padding. Regular box-sizing uses content-box, in which case the width rule applies only to the content--adding any padding, border, or margin will further widen the element's overall size on page.
I'm working on a site and I added previous and next buttons to my posts which I'm creating via a wordpress theme. For some reason on the hover stage of these blocked elements which are links the padding pushes beyond the max height and I can't figure out how to correct this problem. If you take a look at the link
http://hearthable.com/hearthstone-account-wipe/
At the end of the post content you will see Previous Post and Next Post. If you hover over either one you'll see the issue with the padding. I've been trying everything and haven't been able to figure out to not get the hover to flow over.
Thanks
Two different solutions:
Use box-sizing: border-box:
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 85px;
-webkit-box-sizing: border-box; /* Some Webkit versions requires a prefix */
-moz-box-sizing: border-box; /* Gecko (i.e. FireFox) requires a prefix */
box-sizing: border-box;
}
Compability tables are available here.
You can read more about CSS3 box-sizing at MDN, QuirksMode or other good places. Avoid W3Schools like the plague.
Calculate the height as height = desiredHeight - border - padding.
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 65px; // 85px - 20px padding
}
Finally, you can drop the height: 85px from #browse-posts a:hover, it is inherited anyway.
if you have used padding, along with it you should do something else to make the element fits to its original height.
example
div{width: 100px;}
div:hover{padding-left: 5px;}
in this case on hover effect you have added padding left, which makes the div body a 5px margin. in this case the div occupies its original width along with the 5px padding. in order to get rid from this problem.. you can reduce the width to 5px.
then your code will be..
div{width: 100px;}
div:hover{padding-left:5px; width:95px;}
do the same in your code.. you can find your own solution to your problem.
Simply reduce the height of the <a> to 65px
CSS
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 65px;
}
#browse-posts a:hover{
background: #cccccc;
}
Padding, by default, pushes the boundaries of an element outwards. This is a result of something called the box model. The box model defines the way that the width and height of a element is calculated (basically, which properties will contribute or not contribute to this calculation).
In your case, the padding on the <a> element extends outwards past the edge of the container. It's not noticeable normally because the element has no background, but on hover you add one, allowing you to see the true size of the shape.
You can fix this in one of two ways (plus more that I'm not mentioning.. CSS is pretty versatile!):
First of all, you can change the box model to something that will take padding into consideration on the overall size of the element:
box-sizing: border-box;
You will need to use vendor prefixes for this property, like so:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
(note that this needs to be applied to #browse-posts a)
Alternatively, you can simply hide the issue using overflow: hidden; which will not fix the padding from extending outwards, but it will not be visible
This would go on #browse-posts
I hope that helps you. Also, just for future reference, when posting a question it is always a good idea to post some of your source code so that people can easily find the areas that need to be looked at, rather than just a site link.
Cheers!
I'm trying to use a border property on a div that is using a border-radius property.
Here's my CSS:
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
So as you can see I just put a border radius (with all different properties for each browser) as well as a border of 1px. The problem is border isn't drawn on both top corners. It's drawn everywhere else including bottom corners. I looked for something on google but can't find anything...
Any idea ?
Problem in the other markup and styles, because your css is correct: testcase on dabblet
Try to add some margin: #page { margin: 15px; } May be border is simple invisible or container of #page hide border with overflow: hidden;
Update: Problem also may be exists in inner images which can override or ignore some parent properties (e.g border-radius).
I guess due to some issue with height the bottom part is will be hiding, can you set some height on it.
The page height is not defined. That is why it is spanning the whole window and you are not able to see the other borders.
Maybe that's the reason it's not working.
I just made some changes. See the fiddle.
HTML
<div id=page></div>
CSS
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 10px auto; /* the extra line */
height: 200px; /* the extra line */
}
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