labels even breed

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ozzie PHP

Ozzie PHP

02/10/2012 16:15:31
Quote Anchor link
Hallo,

Een vraagje...

Hoe zorgen jullie ervoor dat in een formulier de labels even breed zijn zodat de invoervelden recht onder elkaar staan?

Het lijkt me niet de bedoeling om hier een tabel voor te gebruiken, dus wat dan overblijft is de labels via css een vaste breedte (width) geven. Echter, omdat de (lengte van de) namen van de labels per formulier verschillen, zou je dan bij ieder formulier telkens weer moeten bepalen hoe breed de labels moeten zijn. Niet echt handig. Weet iemand een handigere oplossing?
 
PHP hulp

PHP hulp

27/05/2026 09:44:15
 
Roy -

Roy -

02/10/2012 16:38:45
Quote Anchor link
Misschien dat je een voorbeeldje kan geven van wat je wilt of wat niet lukt. Wordt uit je uitleg bij mij niet helemaal duidelijk.

Edit: Denk je te snappen. Ja gewoon de labels een vaste width geven middels css? Of de labels boven de inputs (display: block), dan heb je er helemaal geen last van.
Gewijzigd op 02/10/2012 16:40:13 door Roy -
 
Ozzie PHP

Ozzie PHP

02/10/2012 16:43:52
Quote Anchor link
Heel simpel... op je scherm zie je dit:

[label 1] [invoerveld]
[label 2] [invoerveld]
[label 3] [invoerveld]
[label 4] [invoerveld]

Label 1 kan bijvoorbeeld zijn "Voornaam", label 2 zou kunnen zijn "Achternaam", label 3 "Leeftijd" en label 4 "Woonplaats". Op het scherm zou dit er dan zo uitzien:

Voornaam [invoerveld]
Achternaam [invoerveld]
Leeftijd [invoerveld]
Woonplaats [invoerveld]

Zoals je ziet staan de invoervelden nu scheef onder elkaar. Om ervoor te zorgen dat ze recht onder elkaar staan, moeten de labels even breed zijn. Wat is de beste manier om dat te doen?

Toevoeging op 02/10/2012 16:46:08:

Een vaste breedte zou kunnen, maar als je bijvoorbeeld een formulier hebt met een (of meerdere) hele lange label-namen, en een formulier met hele korte label-namen, dan moet je voor ieder formulier apart de breedte instellen. Stel dat je een tabel zou gebruiken hoef je niks in te stellen, maar dat lijkt me niet de bedoeling. Vandaar dat ik me afvraag hoe anderen dat dan doen.
 
N K

N K

02/10/2012 16:54:46
Quote Anchor link
Misschien denk ik te simpel maar:
label en input field samen in een div .
label text-align: right en float: left
input: float:right
etc..
 
Ozzie PHP

Ozzie PHP

02/10/2012 16:58:05
Quote Anchor link
Kun je een voorbeeldje geven misschien?
 
N K

N K

02/10/2012 17:35:34
Quote Anchor link
even snel

http://jsfiddle.net/h3Nde/2/
 
Eddy E

Eddy E

02/10/2012 20:18:04
Quote Anchor link
NK: jij wilt dus weer een extra element toevoegen...
Oplossing: zowel label als input een gegeven breedte opgeven. Alles display:blocken en 't zou moeten werken.

Zie http://jsfiddle.net/9tXxx/1/

Trucje: box-sizing: border-box;

Toevoeging op 02/10/2012 20:18:45:

NK: jij wilt dus weer een extra element toevoegen...
Oplossing: zowel label als input een gegeven breedte opgeven. Alles display:blocken en 't zou moeten werken.

Zie http://jsfiddle.net/9tXxx/1/

Trucje: box-sizing: border-box;
 
Ozzie PHP

Ozzie PHP

02/10/2012 20:50:38
Quote Anchor link
@N K: Dat is het niet helemaal. Kijk maar wat er gebeurt als beide labels klein zijn. Ze beginnen niet links en zijn ook niet links uitgelijnd. http://jsfiddle.net/h3Nde/5/

@Eddy, in jouw voorbeeld zijn de input velden weer erg lang...

Iemand anders nog een idee?

Offtopic:

Waar is die box-sizing goed voor?
 
N K

N K

02/10/2012 20:53:32
Quote Anchor link
@Eddy: die is inderdaad netter!

@Ozzie: http://jsfiddle.net/h3Nde/10/ ??
Gewijzigd op 02/10/2012 20:55:13 door N K
 
Ozzie PHP

Ozzie PHP

02/10/2012 21:02:29
Quote Anchor link
Haha, ja maar dat is dus het probleem. Check: http://jsfiddle.net/h3Nde/11/
Nu heb je 2 kleine labels... en de input velden staan nu veel te ver van de labels vandaan. Ik zoek dus eigenijk een manier waarop het werkt zoals een tabel, zodat je niet telkens per formulier de breedte van die labels hoeft aan te passen. Wel grappig overigens, ik dacht dat hier misschien een standaard oplossing voor zou zijn, maar blijkbaar niet :-)
 
N K

N K

02/10/2012 21:17:42
Quote Anchor link
Ik kom er zelf niet op een elegante manier uit.
Hij doet het maar daar is alles mee gezegd ;)

http://jsfiddle.net/h3Nde/17/
 
Ozzie PHP

Ozzie PHP

02/10/2012 21:23:21
Quote Anchor link
Hmmm, da's niet eens zo'n heel gek idee. Twee container div's en dan de labels en inputs onder elkaar zetten... eigenlijk helemaal zo slecht nog niet!! Miscchien ga ik het voortaan wel op die manier doen. Enige vreemde is dat in je code dan de inputs en labels niet bij elkaar staan, maar je hoeft in ieder geval niet meer voor ieder formulier alles apart in te stellen. Niet slecht :)
 
Reshad F

Reshad F

03/10/2012 00:09:37
Quote Anchor link
zoiets? http://jsfiddle.net/ALbU5/
 
Ozzie PHP

Ozzie PHP

03/10/2012 06:14:37
Quote Anchor link
Op zich netjes, maar de labels beginnen nu weer niet aan de linkerkant.
 
Koen Vlaswinkel

Koen Vlaswinkel

03/10/2012 07:27:11
Quote Anchor link
Zo beginnen de labels wel links: http://jsfiddle.net/ALbU5/2/
 
Ozzie PHP

Ozzie PHP

03/10/2012 08:17:30
Quote Anchor link
Ja, inderdaad... maar hier is weer het probleem dat als je labels klein zijn er een "gat" tussen je labels en de inputvelden zit. Zie hier: http://jsfiddle.net/ALbU5/4/

Volgens mij is de enige oplossing waarbij het altijd goed gaat de oplossing van N K: http://jsfiddle.net/h3Nde/17/
 
Reshad F

Reshad F

03/10/2012 10:52:50
Quote Anchor link
hmm ozzie ik denk dat mijn oplossing toch de beste is. waarom? omdat je naar mijn inziens niet semantisch bezig bent zoals bedoelt is. maar misschien heb ik het fout dat kan ook :)
 
Ozzie PHP

Ozzie PHP

03/10/2012 10:55:42
Quote Anchor link
Hmmm... dat weet ik ook niet. Ik weet niet in hoeverre je in een formulier semantisch bezig kunt zijn :-)

De inputs en labels kun je aan elkaar koppelen door id's en "for" te gebruiken.

Wellicht kan Wouter J zijn licht hierover laten schijnen?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.