Menu
I'm creating a simple HTML document containing a form that I intend to use as the contents of a panel within a Firefox add-on. At present the document contains a label and text box, and I want this to stretch the full width of the page with a margin of 5px either side. This my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Phrase Indexer</title>
<style type="text/css" media="all">
body {
font: 10pt arial, helvetica, sans-serif;
padding: 0;
margin: 5px;
position: fixed;
width: 100%;
}
div {
width: inherit
}
#phrase {
width: inherit;
}
</style>
</head>
<body>
<div>
<label for="phrase">Passphrase</label><br />
<input type="text" id="phrase" />
</div>
</body>
</html>
This mostly works, except I'm missing a 5px margin on the right - the text box stretches right to the edge of the page. How can I fix this?
Here's a Fiddle of my problem.
984
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.
I.e. #textField 's width == (100% of width) - (button's computed width). So, for example, let's say 100% width of li is 100 pixels: if the button's computed width is 30px, #textField 's width would be 70px; if button's computed width is 25px, #textField 's width would become 75px.
You can do this way:
body
{
font: 10pt arial, helvetica, sans-serif;
}
div
{
padding: 0.5em;
}
div > *
{
width: 100%;
}
Here's the JS Bin demo: http://jsbin.com/utabul/1
More on this here: Set CSS 100% Width Minus Padding And Margin
119
You should try out box-sizing. I just adding the margin to the div that wraps the form elements, removed the position from the body and add box-sizing to the input.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
body {
font: 10pt arial, helvetica, sans-serif;
padding: 0;
margin:0;
/* position: fixed; */
}
div {
display:block;
margin:5px;
}
#phrase {
width: 100%;
-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 should try this way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Phrase Indexer</title>
<style type="text/css" media="all">
*{
margin:0;
padding:0;
}
body {
}
div {
}
#phrase {
width: 100%;
margin:5px;
}
</style>
</head>
<body>
<div>
<label for="phrase">Passphrase</label><br />
<input type="text" id="phrase" />
</div>
</body>
</html>
Set the body padding: 5px instead of margin, get rid of the fixed position and set the div width to 100% instead of the body - http://jsfiddle.net/xX8yA
body {
font: 10pt arial, helvetica, sans-serif;
padding: 5px;
}
div {
width: 100%;
}
#phrase {
width: inherit;
}
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
