Ergebnis 1 bis 13 von 13
  1. #1
    dogsnhumans.de ist offline Mitglied
    registriert
    27-07-2012
    Beiträge
    46

    Question 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ß
    Geändert von dogsnhumans.de (04-01-2013 um 16:27 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

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

    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.

  3. #3
    dogsnhumans.de ist offline Mitglied
    registriert
    27-07-2012
    Beiträge
    46

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

    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>
    Geändert von dogsnhumans.de (04-01-2013 um 15:43 Uhr)

  4. #4
    dogsnhumans.de ist offline Mitglied
    registriert
    27-07-2012
    Beiträge
    46

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

    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ß
    Geändert von dogsnhumans.de (04-01-2013 um 16:26 Uhr)

  5. #5
    dogsnhumans.de ist offline Mitglied
    registriert
    27-07-2012
    Beiträge
    46

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

    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>

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

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

    Ä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.

  7. #7
    Kasalop ist offline Routinier
    registriert
    29-08-2012
    Beiträge
    398

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

    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

  8. #8
    dogsnhumans.de ist offline Mitglied
    registriert
    27-07-2012
    Beiträge
    46

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

    Zitat Zitat von Kasalop Beitrag anzeigen
    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 ^^
    Geändert von dogsnhumans.de (05-01-2013 um 18:35 Uhr)

  9. #9
    dogsnhumans.de ist offline Mitglied
    registriert
    27-07-2012
    Beiträge
    46

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

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ä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.
    Geändert von dogsnhumans.de (05-01-2013 um 19:13 Uhr)

  10. #10
    dogsnhumans.de ist offline Mitglied
    registriert
    27-07-2012
    Beiträge
    46

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

    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
    Geändert von dogsnhumans.de (05-01-2013 um 19:49 Uhr)

  11. #11
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

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

    Ü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>

  12. #12
    dogsnhumans.de ist offline Mitglied
    registriert
    27-07-2012
    Beiträge
    46

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

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

    Besten Dank an alle

  13. #13
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

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

    Bitte - gern geschehen.

Ähnliche Themen

  1. [CSS] Problem: div mit 100% und padding
    Von J-C im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 03-01-2010, 18:10
  2. CSS Layout Problem
    Von mo im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 24-06-2007, 11:15
  3. [div layout] border geht unter bild durch!!!
    Von Kurt Cobain im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 05-11-2006, 14:32
  4. CSS width:**% Problem
    Von milchkuh im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 18-08-2006, 18:05
  5. padding-problem in ie
    Von frido im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 20-09-2004, 00:29

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •