jens1701
12-19-2008, 08:01 AM
Hi,
i played with this form, but dont get it to work the way i like it.
The picture shows whats it should look like... including flexiblity in width.
So my main problem is, that i can't set the width of the input elements to 100% of the parent element without linebreak and horizontal overflow.
Thoughts:
- Problem with Block Formating Context
- Is it possible for a form element input to auto take all the width they can get?
Please give me a hand.
Greets
Jens
<!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" xml:lang="de" lang="de">
<head>
<title>test</title>
<style type="text/css">
<!--
fieldset { }
#mail_form_fields { overflow: hidden; }
#mail_form_fields div.line { margin: 5px 0;}
#mail_form_fields div.line div { float:left;}
#mail_form_fields input { border: 0.3em solid green; width:100%; }
#mail_form_fields label { float: left; width:100px; text-align: center; }
//-->
</style>
</head>
<body>
<form action="index.php?id=55" id="mailform" enctype="multipart/form-data" method="post">
<fieldset>
<div class="invisible">
<input type="hidden" name="html_enabled" id="mailformhtml_enabled" value="" />
<input type="hidden" name="subject" id="mailformsubject" value="Lorem Ipsum Dolor Siamet" />
<input type="hidden" name="locationData" value="55:tt_content:113" />
</div>
<div id="mail_form_fields">
<div class="line">
<label for="name">Name</label>
<div><input id="name" type="text" name="Name" size=40 value="Lorem Ipsum Dolor Siamet" /></div>
</div>
<div class="line">
<label for="mail">E-Mail</label>
<input id="mail" type="text" name="mail" size=40 value="Lorem Ipsum Dolor Siamet" />
</div>
<div class="line">
<label for="topic">Thema</label>
<input id="topic" type="text" name="Thema" size=40 value="Lorem Ipsum Dolor Siamet" />
</div>
<textarea id="nachricht" name="message" cols="50" rows="10">Lorem Ipsum Dolor Siamet.</textarea>
<div id="submit"><input type="submit" value="Abschicken" /></div>
</div>
</fieldset>
</form>
</body>
i played with this form, but dont get it to work the way i like it.
The picture shows whats it should look like... including flexiblity in width.
So my main problem is, that i can't set the width of the input elements to 100% of the parent element without linebreak and horizontal overflow.
Thoughts:
- Problem with Block Formating Context
- Is it possible for a form element input to auto take all the width they can get?
Please give me a hand.
Greets
Jens
<!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" xml:lang="de" lang="de">
<head>
<title>test</title>
<style type="text/css">
<!--
fieldset { }
#mail_form_fields { overflow: hidden; }
#mail_form_fields div.line { margin: 5px 0;}
#mail_form_fields div.line div { float:left;}
#mail_form_fields input { border: 0.3em solid green; width:100%; }
#mail_form_fields label { float: left; width:100px; text-align: center; }
//-->
</style>
</head>
<body>
<form action="index.php?id=55" id="mailform" enctype="multipart/form-data" method="post">
<fieldset>
<div class="invisible">
<input type="hidden" name="html_enabled" id="mailformhtml_enabled" value="" />
<input type="hidden" name="subject" id="mailformsubject" value="Lorem Ipsum Dolor Siamet" />
<input type="hidden" name="locationData" value="55:tt_content:113" />
</div>
<div id="mail_form_fields">
<div class="line">
<label for="name">Name</label>
<div><input id="name" type="text" name="Name" size=40 value="Lorem Ipsum Dolor Siamet" /></div>
</div>
<div class="line">
<label for="mail">E-Mail</label>
<input id="mail" type="text" name="mail" size=40 value="Lorem Ipsum Dolor Siamet" />
</div>
<div class="line">
<label for="topic">Thema</label>
<input id="topic" type="text" name="Thema" size=40 value="Lorem Ipsum Dolor Siamet" />
</div>
<textarea id="nachricht" name="message" cols="50" rows="10">Lorem Ipsum Dolor Siamet.</textarea>
<div id="submit"><input type="submit" value="Abschicken" /></div>
</div>
</fieldset>
</form>
</body>