Abstand zwischen Etikett und Eingang

Question

Ich habe mehrere Eingabe/Textarea mit einem Etikett. Was ich will, ist einen Raum zwischen Label und Eingabe selbst zu machen. Das Problem ist, dass Beschriftungstext unterscheidet immer

Zum Beispiel:

<p class="formfield"> 
    <label translate="case.calculation.label.price"></label> 
    <input ng-model="part.priceByUser" class="table-form"> 
</p> 
<p class="formfield"> 
    <label for="textarea" translate="case.calculation.parts.description"></label> 
    <textarea id="textarea" rows="3" ng-model="part.descriptionByUser" class="table-form"></textarea> 
</p> 

Sieht aus wie:

Ich denke, dies mit einer Breite fester Etiketts erfolgen kann, so fügte ich so etwas wie :

.formfield label { 
    padding-right:10px; 
    width: 15%; 
} 

Mit was es aussieht corr ect auf alle normalen Bildschirm zB:

Aber Problem auf kleines Gerät als Mobiltelefone haben, wo Label-Text-Eingabebereich zB überlaufen kann:

ich für jede beraten werde gerne oder am besten Übung für diese Art von Problem :) Danke Jungs.

Answer 1

Also sprachen wir über die Verwendung von Medienabfragen in den Kommentaren (und Sie haben nach Best Practices gefragt) Ihrer Antwort. Ich sage nicht, dass dies immer die beste Vorgehensweise ist, aber in Ihrer Situation funktionieren würde und viel Platz für das Label und den Input lässt, was im Allgemeinen eine gute Praxis im Mobilbereich ist. Ein einfacher Weg, um möglicherweise einige Änderungen an Ihrer Etiketten tun würde CSS wie folgt zu verwenden:

@media (max-width: 480px) { 

    .formfield label { 
    padding-right:0px; 
    width: 100%; 
    } 

    .formfield input, .formfield textarea { 
    width: 100%; 
    } 

} 

Bitte alle Ihre anderen CSS betrachten kann wäre toll wahrscheinlich funktionieren diese von mir, sondern in Ihrem Beispiel unterschiedlich sein. Setzen Sie einfach die 480px auf was immer Ihre Anforderungen am besten erfüllt. Es ist der Haltepunkt, wenn die Medienabfrage wirksam wird.

Just for reference: MDN - Using media queries

Answer 2

Sie haben Recht, Sie müssen feste Etikettenbreite einstellen (15% ist NICHT feste Breite). Ich würde auch Tabellen-Layout für eine bessere Optik verwenden:

.formfield { 
 
    display: table; 
 
    width: 100%; 
 
    padding-bottom: 25px; 
 
} 
 
.formfield label, 
 
.formfield .input-wrapper { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.formfield label { 
 
    width: 100px; 
 
} 
 
.formfield .input-wrapper .table-form { 
 
    width: 100%; 
 
}

<div class="formfield"> 
 
    <label for="price">Price</label> 
 
    <div class="input-wrapper"> 
 
    <input id="price" class="table-form" /> 
 
    </div> 
 
</div> 
 
<div class="formfield"> 
 
    <label for="textarea">Description</label> 
 
    <div class="input-wrapper"> 
 
    <textarea id="textarea" rows="3" class="table-form"></textarea> 
 
    </div> 
 
</div>

Answer 3

Wenn Sie bereits den maximalen Speicherplatz von einem Label unter wissen dann, dass Wert des Raumes gilt als min-width für alle Etiketten. Etwas wie folgt aus:

.formfield label { 
    padding-right:10px; 
    width: 15%;  /* to maintain responsive */ 
    min-width: 120px; /* minimum threshold width */ 
} 

Dies stellt sicher, dass die minimale Breite der Etiketten sind nicht weniger als 120px selbst wenn 15% der Breite kleiner als 120px. Daher wird das Layout immer noch reagieren.