Page 1 of 1
[Opgelost] plaats van checkbox in formulier (CSS)
Posted: Wed May 22, 2013 12:01 pm
by rayring
Ik probeer de checkboxen gebruikt in onderstaand formulier voor de betreffende regels te krijgen.
http://goo.gl/X36Af
Heb al verschillende zaken in CSS aangepast maar krijg het niet voor elkaar wie heeft de gouden tip...
Hieronder mijn form CSS:
Code: Select all
/*contact form*/
div.column {
float: left;
width: 300px;
padding: 5px;
clear: left;
}
div.columnclear {
margin-left: 320px;
padding: 5px;
width: 300px;
}
div.radio {
height: auto;
padding-bottom: 45px;
}
div.radio div {
float: left;
}
label {
display: block;
padding: 1px;
}
.radio label {
width: 50px;
}
input {
width: 150px;
}
input[type="radio"] {
width: 40px;
float: left;
height: auto;
}
input[type="checkbox"] {
width: auto;
}
.test {
height: 10px;
}
.captcha {
height: 120px;
padding: 4px;
width: 235px;
}
/*eind contact form*/
Re: plaats van checkbox in formulier (CSS)
Posted: Wed May 22, 2013 12:14 pm
by Rolf
Re: plaats van checkbox in formulier (CSS)
Posted: Wed May 22, 2013 12:18 pm
by rayring
Die had ik inderdaad gevonden en heb geprobeerd te stylen maar zonder resultaat..
Re: plaats van checkbox in formulier (CSS)
Posted: Wed May 22, 2013 12:50 pm
by Rolf
Mijn ervaring met (formulier) stylen is dat je snel te veel styled... Verwijder direct de standaard FormBuilder stylesheet want deze is zinloos. Pak het voorbeeld stylesheet van mijn blog en ga daarmee aan het werk.
Re: plaats van checkbox in formulier (CSS)
Posted: Wed May 22, 2013 1:02 pm
by rayring
Rolf wrote:Mijn ervaring met (formulier) stylen is dat je snel te veel styled... Verwijder direct de standaard FormBuilder stylesheet want deze is zinloos. Pak het voorbeeld stylesheet van mijn blog en ga daarmee aan het werk.
De standaard stylesheet had ik inderdaad al verwijderd, de stylesheet van je blog heb ik al gebruikt (zie code) wellicht zoek ik meer hulp in het specifieke CSS dus welke styling code moet ik gebruiken om de checkbox voor de regels te krijgen... een tip in die richting zou fijn zijn...
Re: plaats van checkbox in formulier (CSS)
Posted: Wed May 22, 2013 1:23 pm
by pedes
gewoon even een "float: left" geven aan beide elementen
ik heb dit vlug even via firebug gedaan en dit is het resultaat
Code: Select all
<span style="float:left;"><input id="fbrp__129" value="t" name="m60345fbrp__129" class="cms_checkbox" type="checkbox"></span>
<span style="float:left;"><label for="fbrp__129">31 mei vrijdag jaarmarkt centrum Hardegarijp (hurdegaryp) winkelcentrum Fuormanderij 13-21 uur kraam €45.- Grondplaats €25.- 4 meter</label></span>
zie bijlage
Je zal in uw formbuilder dus uw element een class moeten toekennen en dan in uw css die class een float left geven, dat moet lukken.
grtz
Peter
Re: plaats van checkbox in formulier (CSS)
Posted: Wed May 22, 2013 1:55 pm
by rayring
pedes wrote:gewoon even een "float: left" geven aan beide elementen
ik heb dit vlug even via firebug gedaan en dit is het resultaat
Code: Select all
<span style="float:left;"><input id="fbrp__129" value="t" name="m60345fbrp__129" class="cms_checkbox" type="checkbox"></span>
<span style="float:left;"><label for="fbrp__129">31 mei vrijdag jaarmarkt centrum Hardegarijp (hurdegaryp) winkelcentrum Fuormanderij 13-21 uur kraam €45.- Grondplaats €25.- 4 meter</label></span>
zie bijlage
Je zal in uw formbuilder dus uw element een class moeten toekennen en dan in uw css die class een float left geven, dat moet lukken.
grtz
Peter
Hoi Peter bedankt voor je reply!
Met float left lukte het me niet, de andere velden bovenin het formulier werden dan niet goed weergegeven... ik heb het wel voor elkaar met de volgende aanpassing:
Code: Select all
input[type="checkbox"] {
width: auto;
margin-top: 10px;
}
label {
margin-right: 120px;
display: box;
padding: 1px;
}