DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Als het goed is zou die selector elk element met id fbrp__29 etc moeten matchen.
Je 2e vraag snap ik niet.
Je 2e vraag snap ik niet.
@ 2e vraag,quote:Op vrijdag 8 juli 2011 13:05 schreef Scorpie het volgende:
Als het goed is zou die selector elk element met id fbrp__29 etc moeten matchen.
Je 2e vraag snap ik niet.
Dit staat er in de html:
| 1 2 3 4 5 6 7 8 9 | <div class="required"> <label for="fbrp__31">Details van de kinderen*</label> <textarea name="cntnt01fbrp__31" cols="80" rows="15" class="cms_textarea" id="fbrp__31"></textarea> <a href="javascript:fbht('fbrp_ht_31')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a> <span id="fbrp_ht_31" style="display:none" class="fbr_helptext">Vul het als volgt in: Naam kind 1 - Geslacht kind 1 - Leeftijd kind 1 Naam kind 2 - Geslacht kind 2 - Leeftijd kind 2 etc...</span></div> |
Het gaat met dus om het <label for="fbrp__31">. Hoe roep ik die aan in de css? Die moet ik namelijk een bepaalde breedte geven. Hij neem niet de #fbrp__31-code over.
Is het mogelijk die labels een id te geven en dat als selector in je css te gebruiken?quote:
Thanks, dat werkt! Nu moet ik nog die label for="blabla" editten, maar hoe kan dat? Ik heb daar nog nooit van gehoord
Breasts! helping men to avoid eye contact since 1865.
Nee, want ik kan die code niet editten, het is een form gegenereerd door een module in mijn cms.quote:Op vrijdag 8 juli 2011 13:09 schreef Garisson72 het volgende:
[..]
Is het mogelijk die labels een id te geven en dat als selector in je css te gebruiken?
als het de enige label binnen die div is, kun je hem selecteren door
div.required label {
...
}
als je meerdere labels binnen die div hebt, worden die daar echter allemaal door geraakt.
Is het genereren van die forms in dat CMS niet configureerbaar? Dat je daar op één of andere manier een id aan meegeeft?
div.required label {
...
}
als je meerdere labels binnen die div hebt, worden die daar echter allemaal door geraakt.
Is het genereren van die forms in dat CMS niet configureerbaar? Dat je daar op één of andere manier een id aan meegeeft?
Breasts! helping men to avoid eye contact since 1865.
Nee, maar wel meerdere divs die zo heten en ook een label hebben. Ik ga even spelen of ik iets kan maken wat er goed uit zietquote:Op vrijdag 8 juli 2011 13:11 schreef Garisson72 het volgende:
als het de enige label binnen die div is, kun je hem selecteren door
div.required label {
...
}
als je meerdere labels binnen die div hebt, worden die daar echter allemaal door geraakt.
het kan met label[for="fbpr__31"] maar er zijn betere oplossingen, volgens mij kun je die module instellen dat'ie classes meegeeft. En anders kun je het template aanpassen, en wat container-divs gebruiken. Die fbpr_31 is namelijk een variable.
Ik wil graag radio buttons maken die ook reageren als je er bijna op klikt. Ik dacht dat te kunnen bereiken met gewoon een beetje padding toevoegen aan het input-radio element, maar dat werkt niet 
Weet iemand hier misschien een slimme truc voor waarvoor ik niet m'n hele markup hoef om te gooien?
Weet iemand hier misschien een slimme truc voor waarvoor ik niet m'n hele markup hoef om te gooien?
Label?quote:
Ik wil graag radio buttons maken die ook reageren als je er bijna op klikt. Ik dacht dat te kunnen bereiken met gewoon een beetje padding toevoegen aan het input-radio element, maar dat werkt niet
Weet iemand hier misschien een slimme truc voor waarvoor ik niet m'n hele markup hoef om te gooien?
Ik zal even laten zien hoe het er ongeveer uit ziet.quote:
Op 
Het is dus een meerkeuzevraag met 5 opties (van volledig oneens tot volledig eens). De 3 middelste opties hebben wel een label, maar die wordt met CSS verborgen om tot bovenstaand resultaat te komen.
Ik zit er nu aan te denken om de buttons door jQueryUI Button te laten vervangen. Dat is misschien de beste oplossing, qua usability en ook qua consistentie tussen browsers.
JQuery UI is sowieso een mooie manier om gestandaardiseerde forms te maken.quote:Op zaterdag 9 juli 2011 12:02 schreef Tijn het volgende:
[..]
Ik zal even laten zien hoe het er ongeveer uit ziet.
[ afbeelding ]
Het is dus een meerkeuzevraag met 5 opties (van volledig oneens tot volledig eens). De 3 middelste opties hebben wel een label, maar die wordt met CSS verborgen om tot bovenstaand resultaat te komen.
Ik zit er nu aan te denken om de buttons door jQueryUI Button te laten vervangen. Dat is misschien de beste oplossing, qua usability en ook qua consistentie tussen browsers.
zou nog kunnen overwegen een absoluut label achter elke input te leggen maar dat geeft wel extra mark-up. Voor js zou ik alleen gaan als het netjes degradeert. radiobuttons en checkboxen zijn wel een bitch met css
“Specialization is for insects”.—Robert Heinlein
Ik snap niet helemaal wat het probleem is. Waarom moet je die labels verbergen? En waarom niet alle 5 een label?quote:
[..]
Ik zal even laten zien hoe het er ongeveer uit ziet.
[ afbeelding ]
Het is dus een meerkeuzevraag met 5 opties (van volledig oneens tot volledig eens). De 3 middelste opties hebben wel een label, maar die wordt met CSS verborgen om tot bovenstaand resultaat te komen.
Ik zit er nu aan te denken om de buttons door jQueryUI Button te laten vervangen. Dat is misschien de beste oplossing, qua usability en ook qua consistentie tussen browsers.
Je kunt je labels toch gewoon middels float:left achter elkaar zetten? Met de radiobuttons erin?
goed om te weten wist niet dat een input binnen een label mochtquote:
[..]
Ik snap niet helemaal wat het probleem is. Waarom moet je die labels verbergen? En waarom niet alle 5 een label?
Je kunt je labels toch gewoon middels float:left achter elkaar zetten? Met de radiobuttons erin?
“Specialization is for insects”.—Robert Heinlein
Nou ja, ik neem aan dat het een enquete o.i.d. is - met 40x dezelfde soort vragen onder elkaar, met 40x dezelfde opties. Beetje overkill om 40 labels met "heel erg oneens", "oneens", "weet niet", "eens", "heel erg eens" te hebben.
Zitten er nog elementen om de radiobuttons heen? Een li ofzo? Dan zou je daar met JS de klik van kunnen afvangen en deze dan de radiobutton laten activeren.
Zitten er nog elementen om de radiobuttons heen? Een li ofzo? Dan zou je daar met JS de klik van kunnen afvangen en deze dan de radiobutton laten activeren.
Nee.
Waarom moeilijk doen met li als er gewoon een element bestaat wat dat natuurlijk al doet?quote:
Nou ja, ik neem aan dat het een enquete o.i.d. is - met 40x dezelfde soort vragen onder elkaar, met 40x dezelfde opties. Beetje overkill om 40 labels met "heel erg oneens", "oneens", "weet niet", "eens", "heel erg eens" te hebben.
Zitten er nog elementen om de radiobuttons heen? Een li ofzo? Dan zou je daar met JS de klik van kunnen afvangen en deze dan de radiobutton laten activeren.
Inderdaad. Ze zitten trouwens ook inderdaad in li's. Geen slecht idee om daar een click-event aan te hangen om de radio-button te zettenquote:
Nou ja, ik neem aan dat het een enquete o.i.d. is - met 40x dezelfde soort vragen onder elkaar, met 40x dezelfde opties. Beetje overkill om 40 labels met "heel erg oneens", "oneens", "weet niet", "eens", "heel erg eens" te hebben.
Zitten er nog elementen om de radiobuttons heen? Een li ofzo? Dan zou je daar met JS de klik van kunnen afvangen en deze dan de radiobutton laten activeren.
Ik vraag alleen maar of er een element om heen zit, ik zeg niet dat het perse de juiste oplossing is. Ik ken monsterlijke oplossingen uit .NET waar lijsten met radiobuttons/checkboxes in tabellen worden gerenderd, dus ik kijk nergens meer van op.
Nee.
Lijkt me een prima oplossing dan. Ook zonder Javascript functioneert het formulier dan naar behoren. Iets minder gebruiksvriendelijk misschien, maar je moet wat als het met pure CSS/HTML niet op te lossen is/lijkt te zijn.quote:
[..]
Inderdaad. Ze zitten trouwens ook inderdaad in li's. Geen slecht idee om daar een click-event aan te hangen om de radio-button te zetten
Nee.
...maar waarom niet gewoon simpelweg een label er omheen?quote:
[..]
Inderdaad. Ze zitten trouwens ook inderdaad in li's. Geen slecht idee om daar een click-event aan te hangen om de radio-button te zetten
Waarom denken jullie allemaal zo moeilijk?
De labels voor de middelste 3 elementen worden verborgen, omdat het een enquête moet worden en er mogelijk 100 van dit soort vragen onder elkaar komen te staan. Daarom wil ik alleen van de buitenste twee elementen het label weergeven en van de binnenste 3 niet, om een overload aan dubbele teksten te voorkomen.quote:
[..]
Ik snap niet helemaal wat het probleem is. Waarom moet je die labels verbergen? En waarom niet alle 5 een label?
Je kunt je labels toch gewoon middels float:left achter elkaar zetten? Met de radiobuttons erin?
Wat ook nog wel een oplossing zou kunnen zijn, is met JS de teksten van de binnenste 3 labels weghalen. Dan gebruik je nog wel het klik-gedrag van het label-element om de radio button te zetten. Nadeel is dan dat een bezoeker zonder Javascript een formulier voor z'n neus krijgt die er heel anders uitziet, terwijl met de eerste oplossing alleen de usability er een klein beetje onder lijdt wanneer een bezoeker geen JS heeft, maar de pagina er visueel hetzelfde uitziet.
Plus dat een gebruiker met Javascript, maar met een screenreader o.i.d. lege labels voorgelezen krijgt. Dat lijkt me dus geen oplossing. Wat KomtTijd zegt, wellicht kun je de labels van de middelste 3 leeg laten lijken d.m.v. de text-indent e.d.?
Nee.
Er zitten al labels omheen. Zonder CSS ziet het er zo uit:quote:
[..]
...maar waarom niet gewoon simpelweg een label er omheen?
Waarom denken jullie allemaal zo moeilijk?
Het punt is dat ik de teksten van de middelste 3 labels niet wil weergeven. Dat doe ik nu door met CSS die elementen te verbergen, maar ja, dan heb je dus ook geen labels meer om op te klikken.
Maar dan hebben de middelste 3 elementen dus helemaal geen label-tekst meer. Dat lijkt me accessibility-wise nou niet echt ideaal, of wel?quote:
Plus dat een gebruiker met Javascript, maar met een screenreader o.i.d. lege labels voorgelezen krijgt. Dat lijkt me dus geen oplossing. Wat KomtTijd zegt, wellicht kun je de labels van de middelste 3 leeg laten lijken d.m.v. de text-indent e.d.?
met een enquete kun je je wel afvragen in hoeverre dat nodig is, voor je doelgroep. Een label met alleen een radio-button erin zou veruit het makkelijkst zijn.quote:
[..]
Maar dan hebben de middelste 3 elementen dus helemaal geen label-tekst meer. Dat lijkt me accessibility-wise nou niet echt ideaal, of wel?
En anders kun je de CSS-truckendoos wel open halen om de tekst te verbergen zonder dat je het label verbergt.
Een vaste hoogte en breedte, en de tekstkleur RGBA(0,0,0,0) ofzo.
