• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

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

D

dogsnhumans.de

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

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ß
 
Zuletzt bearbeitet:
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.
 
Besten Dank :)

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

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

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>
 
Zuletzt bearbeitet:
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ß
 
Zuletzt bearbeitet:
So fertig. Ganz zufrieden bin ich zwar nicht. ^^ Wenn Ihr Tipps habt nur los. :)

Hier meine Lösung:

HTML: 
<!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>
 
Ä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.
 
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
 
Kasalop schrieb:
Code: 
<!-- HTML Code -->
<label>Nachname: <input type="text" name="name"></label>
Zum Vergrößern anklicken....

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 ^^
 
Zuletzt bearbeitet:
kkapsner schrieb:
Ä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.
Zum Vergrößern anklicken....

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: 
<!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.
 
Zuletzt bearbeitet:
So gehts:

HTML: 
<!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. :d

thx @ kkapsner
 
Zuletzt bearbeitet:
Ü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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben