CODEWITHSUNDEEP
htmlcssforms
Joshua Muheim
Joshua Muheim

Reputation: 13243

Tell input[type=text] field with some margin-left to use all remaining width (like a div with width:auto does)?

I try to create a form with text inputs and textareas, where the labels should be on the left side with 200px width, and the inputs should be on the right side, using all of the available space.

I laid out a definition list this way, and it worked to give the term a width of 200px and float it left, and to give the definition a margin-left of 200px. This was enough to make the definition use all the available width. Check out here: http://jsfiddle.net/jmuheim/kjf8f/

Now I don't succeed in telling my text inputs and textareas to behave the same way. I tried width:100%, but then it's too wide, because it has a margin of 200px.

label {
    display: block;
    margin: 0;
    background-color: green;
    float: left;
    clear: left;
    width: 200px;
}
input[type="text"], textarea {
    display: block;
    margin: 4px 0 4px 200px;
    background-color: red;
}

http://jsfiddle.net/jmuheim/WWWs3/

And where is the "margin" on top of the input field coming from? The textarea doesn't have this. Is it because textarea is a container tag, and input isn't? Is there a way to work around this? I'd rather not need any helper markup like additional span, div, etc.

And would it be appropriate to simply put the label and text input / area into its own definition list and give them both a width of 100%? Is this encouraged markup, to put form inputs into definition lists?

Any help is highly appreciated.

Upvotes: 0

Views: 2144

Answers (2)

Joshua Muheim
Joshua Muheim

Reputation: 13243

It seems that this isn't possible, I don't know exactly why.

I worked around the problem by adding a div around every input field which consumes all left space, and then I set the width of the contained input field to 100%.

.wrapper {
    margin-left: 200px;
}
input[type="text"], textarea {
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

See the jsFiddle: http://jsfiddle.net/7UdLh/

Upvotes: 0

Pumpkinpro
Pumpkinpro

Reputation: 847

if its ok for you to use jQuery 

var block_width = $('.block').width()
var input_width = block_width -200
$('.block input, .block textarea').width(input_width)

Fiddle

Upvotes: 1

Related Questions