Problem: width: 100% + padding & border = Layout gesprengt

**dogsnhumans.de** · 04-01-2013, 14:30

Hallo,

ich erstelle gerade in der breite flexibles tabellenloses Formular.

Das Problem dabei ist, dass die Elemente wie "input type=text" oder "textarea" bei 100% width durch "padding" und "border" immer breiter dargestellt werden und somit das Layout sprengen.

Die 100% width beziehen sich nämlich dummerweise auf die innere Ausbreitung (ohne border & padding). Nun möchte ich dennoch nicht auf padding und border bei Formularelementen verzichten.

Gibt es einen Trick, bzw. Workarround?

Gruß

**kkapsner** · 04-01-2013, 14:56

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="/kkjs/modules/kkjs.load.js"></script>
<script type="text/javascript"></script>
<style type="text/css">
input {
	width: 100%;
}
.outer {
	border: 2px solid red;
	padding: 50px;
}
.inner {
	position: relative;
}
</style>
</head>
<body>
<div class="outer"><div class="inner"><input></div></div>
</body>
</html>

- nur im FF getestet.

**dogsnhumans.de** · 04-01-2013, 15:28

Besten Dank

Es funktioniert bestens. Im IE8 läufts auch. Wieder einmal was dazugelernt.

Aber schon komisch, das dies z.B. bei input type="submit" nicht notwendig ist.

Mir ist aufgefallen das es auch ohne .inner --> position: relative funktioniert.

Der Code:

Code:

<style>
input[type="text"] , textarea {
	border: none;
	width: 100%;
}
.inputfield {
	border: 1px #000 solid;
	padding: 10px;
	margin-top: 4px;
}
</style>
<div class="inputfield">
	<input id="txt_website_url" type="text" value="" />
</div>

**dogsnhumans.de** · 04-01-2013, 16:21

Hmm, ich stelle gerade fest, dass das auch nicht so optimal ist.

Es soll ein Formular für Touchscreens sein. Wenn ich das Padding nicht direkt auf die "input" Felder lege, sind diese schwieriger mit dem Finger zu treffen.

Mit JavaScript könnte man das vll. lösen. Entweder border & padding von der width abziehen oder bei Klick auf das Div Focus in "input" setzen!?. Erstes ist vermutlich komplizierter, denn wenn das Fenster größer oder kleiner gezogen wird, müsste sich die Breite anpassen.

Aber ich wollte nocheinmal vorher fragen ob es vll. noch eine andere Lösung gibt.

Gruß

**dogsnhumans.de** · 04-01-2013, 17:48

So fertig. Ganz zufrieden bin ich zwar nicht. ^^ Wenn Ihr Tipps habt nur los.

Hier meine Lösung:

HTML-Code:

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="UTF-8">
		<!-- JQUERY -->
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<!-- Seitenspezifischer JavaScript -->
		<script type="text/javascript">
			$(document).ready(function(){
				$('.inputfield').click(function() {
					$(this).children().focus();
				});
			});
		</script>
		<style type="text/css">
			body {
				background-color: #EEE;
			}
			input[type="text"], textarea {
				border: none;
				width: 100%;
				background-color: #FFF;
			}
			.inputfield {
				border: 1px #000 solid;
				padding: 10px;
				margin-top: 4px;
				cursor: text;
				background: #FFF;
			}
		</style>
	</head>
	<body style="margin: 10px;">
		<div class="inputfield">
			<input id="haha" type="text" value="" />
		</div>
		<div class="inputfield">
			<textarea id="hihi"></textarea>
		</div>
	</body>
</html>

**kkapsner** · 05-01-2013, 00:53

Äh... warum machst du die <input>s nicht einfach höher... der tote Raum (der jetzt fälschlicher Weise auch noch mit einem Textcursor gekennzeichnet ist, was tierisch verwirrt) muss doch nicht tot sein und kannt komplett vom <input> aufgebraucht werden.

**Kasalop** · 05-01-2013, 01:07

für sowas gibt es unter anderem labels (okay... eigentlich sind sie für was anderes, aber egal).

Code:

<!-- HTML Code -->
<label>Nachname: <input type="text" name="name"></label>

Ja das ist erlaubte syntax, wenn auch unüblich. Die meisten nutzen, label in verbindung mit dem for-attribut, aber obiges ist ebenfalls gültige syntax um ein inputfeld einem label zuzuweisen.

und dann eben das label entsprechend formatieren. Sollte auch gehen und du spaarst dir das js. Reines CSS ziehe ich in der Regel javascript vor, insofern es die Funktionalität schon gibt

Lg Kasalop

**dogsnhumans.de** · 05-01-2013, 18:29

Zitat von Kasalop

Code:

<!-- HTML Code -->
<label>Nachname: <input type="text" name="name"></label>

Bekomme ich dann das <label> über das <input>? So hier?

<label for="input1">Beschriftung: <br />
<input type="text" id="input1" />
</label>

Irgendwie verwirrend. Ich habe mir mal gestern durch Zufall eine andere Seite angeschaut. Dort waren auch <input type="text"> auf 100% width eingestellt. Aber die letztendliche Ausbreitung war mit border und padding. *schulterzuck*

Ich probiere es mal mit den Labels ^^

**dogsnhumans.de** · 05-01-2013, 18:42

Zitat von kkapsner

Äh... warum machst du die <input>s nicht einfach höher... der tote Raum (der jetzt fälschlicher Weise auch noch mit einem Textcursor gekennzeichnet ist, was tierisch verwirrt) muss doch nicht tot sein und kannt komplett vom <input> aufgebraucht werden.

Sobald ich ein padding oder border auf <input type="text" /> setzte, ist es in der letzendlichen Ausbreitung (Breite) mehr als 100% und würde aus dem <div> rechts herausragen. Deshalb mach ich es nicht ^^:

HTML-Code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Unbenanntes Dokument</title>
        <style type="text/css">
			body {
				margin: 10px;
			}
			input[type="text"] {
				width: 100%;
				padding: 5px;
			}
			#form {
				width: 250px;
				border: 1px #000 solid;
			}
        </style>
    </head>
    <body>
    	<div id="form">
        	<input type="text" />
        </div>
    </body>
</html>

In diesem Fall ist das <div> 250px breit. In meinem aktuellen Projekt ist die Breite des <div> aber abhängig von der Fenstergröße.

Und da ich nicht weiß wie groß das Fenster beim Anwender ist, weiß ich auch nicht wie breit das <div> ist. Die <input type="text" /> sollen aber in kompletter Breite erscheinen. Um eine einfache Eingabe für Touchscreens zu ermöglichen, muss ich dem <input type="text" /> ein padding geben. Und schon sprengt es das Design.

**dogsnhumans.de** · 05-01-2013, 19:31

So gehts:

HTML-Code:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Fenstertitel</title>
    <style type="text/css">
		input[type="text"] {
			width: 100%;
			padding: 10px;
		}
		.outer {
			border: 2px solid red;
			padding: 15px;
		}
		.inner {
			position: relative;
			left: -11px;
		}
    </style>
    </head>
    <body>
    	<div class="outer">
            <div class="inner">
            	<label>Test: </label>
            	<input type="text" />
            </div>
        </div>
    </body>
</html>

Da es immer rechts überragt, einfach per left nach links verrücken unter Berücksichtigung des <input type="text"> paddings / borders links.

Das .outer padding muss auch so groß sein (+1) wie des <input> um visuell einen padding Wert von 0 hinzubekommen.

Ein bißchen Rechenarbeit, aber zumindestens ohne Javascript.

thx @ kkapsner

**kkapsner** · 06-01-2013, 12:44

Über das <label> hast du auch eine größere Fläche für Touchscreens (wenn du es richtig verwendest) und brauchst dann diese Rechnerei nicht:

Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Fenstertitel</title>
		<style type="text/css">
		input[type="text"] {
			width: 100%;
			border-style: none;
			padding: 5px 0;
			margin: 0;
		}
		.outer {
			display: block;
			border: 2px solid red;
			padding: 10px 15px;
		}
		.inner {
			position: relative;
			display: block;
		}
		</style>
		</head>
	<body>
		<label class="outer">
			<span class="inner">
				Text:<br>
				<input type="text" placeholder="hier Text eingeben">
			</span>
		</label>
	</body>
</html>

**dogsnhumans.de** · 08-01-2013, 11:12

TOP. So hab ich mir das vorgestellt. Formulare formatieren ist eine Sache für sich ^^.

Besten Dank an alle

**kkapsner** · 08-01-2013, 19:11

Bitte - gern geschehen.

Thema: Problem: width: 100% + padding & border = Layout gesprengt

LinkBack

Themen-Optionen

Anzeige

Problem: width: 100% + padding & border = Layout gesprengt (input / textarea)

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

AW: Problem: width: 100% + padding & border = Layout gesprengt

Ähnliche Themen

[CSS] Problem: div mit 100% und padding

CSS Layout Problem

[div layout] border geht unter bild durch!!!

CSS width:**% Problem

padding-problem in ie

Lesezeichen

Lesezeichen

Berechtigungen

json Datei parsen

const prefix

json Datei parsen

json Datei parsen

json Datei parsen

const prefix