Menu
Lets say I have a text box that I want to fill a whole line. I would give it a style like this:
input.wide {display:block; width: 100%}
This causes problems because the width is based on the content of the text box. Text boxes have margin, borders, & padding by default, which makes a 100% width text box larger than its container.
For example, here on the right:
Is there any way to make a text box fill the width of its container without expanding beyond it?
Here is some example HTML to show what I mean:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
If this is run, you can see by looking at the "normal" text box that the "wide" text box is sticking out beyond the container. The "normal" text box floats to the actual edge of the container. I'm trying to make the "wide" text box fill its container, without expanding beyond edge like the "normal" text box is.
237
To resize a Textbox within a Contact Form, click Edit on the subquestion in your Build tab. Go to the Layout tab and adjust the Textbox Width. Within Contact Forms each field will have a different default width. By specifying a larger or smaller value you can increase or decrease the width of the Textbox.
To resize a shape, text box, or WordArt, under Drawing Tools, on the Format tab, in the Size group, enter the measurements that you want into the Height and Width boxes.
If you simply want to specify the height and font size, use CSS or style attributes, e.g. //in your CSS file or <style> tag #textboxid { height:200px; font-size:14pt; } <!
Is there any way to make a text box fill the width of its container without expanding beyond it?
Yes: by using the CSS3 property ‘box-sizing: border-box’, you can redefine what ‘width’ means to include the external padding and border.
Unfortunately because it's CSS3, support isn't very mature, and as the spec process isn't finished yet, it has different temporary names in browsers in the meantime. So:
input.wide {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
The old-school alternative is simply to put a quantity of ‘padding-right’ on the enclosing <div> or <td> element equal to about how much extra left-and-right padding/border in ‘px’ you think browsers will give the input. (Typically 6px for IE<8.)
102
What you could do is to remove the default "extras" on the input:
input.wide {display:block; width:100%;padding:0;border-width:0}
This will keep the input inside its container.
Now if you do want the borders, wrap the input in a div, with the borders set on the div (that way you can remove the display:block from the input too). Something like:
<div style="border:1px solid gray;">
<input type="text" class="wide" />
</div>
Edit:
Another option is to, instead of removing the style from the input, compensate for it in the wrapped div:
input.wide {width:100%;}
<div style="padding-right:4px;padding-left:1px;margin-right:2px">
<input type="text" class="wide" />
</div>
This will give you somewhat different results in different browsers, but they will not overlap the container. The values in the div depend on how large the border is on the input and how much space you want between the input and the border.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
