blok wrapper

Door ohes ohes op 15-06-2010 21:41

1.947 views

Hi,

Vraagje. Ik wil graag een flexibele layout op m'n site. Een van de dingen die er op komt is een zoekfunctie. De zoekfunctie bestaat uit een invoerveld voor tekst, en daarachter een aantal checkboxen.

Zoek naar <input type="text"> in <input type="checkbox"> optie 1 <input type="checkbox"> optie 2 <input type="checkbox"> optie 3 etc...

Wanneer ik de pagina smaller maak, dan gaat op een gegeven moment het einde van de regel, naar een volgende regel. Dat is heel normaal. Maar het vervelende is nu, dat de tekst "optie ..." naar de volgende regel gaat, maar het vinkboxje niet. die wacht nog even.

Weet iemand een manier om dit "<input type="checkbox"> optie ..." te bundelen zodat het geheel naar de volgende regel gaat zodra de pagina te smal word?

Jan Koehoorn

15-06-2010 21:44

Je zou kunnen proberen ze in een <ul> te zetten, met de checkbox/label paren in een li. Overigens is het netter om de tekst die bij een checkbox hoort in een <label> te zetten. Dan kan een gebruiker de checkbox namelijk ook activeren door op de labeltekst te klikken.

ohes ohes

15-06-2010 21:50

ah! net als bij listamatic navigatie dingen?

Jan Koehoorn

15-06-2010 21:52

Net nog even gekeken en als je een span om de input/label paren zet, en je geeft die de CSS


span.nowrap {white-space: nowrap;}

mee, dan gaat het ook goed.

ohes ohes

15-06-2010 22:02

Werkt! Thnx.

<style>
span.nowrap {white-space: nowrap;}
</style>

<span class="nowrap"><input type="checkbox" name="a" /> <label for="a">Test tekst</label></span>

Reageren

Inloggen om te reageren