Bootstrap render – Checkbox bez vnořeného input v label

Newer
Člen | 47
+
0
-

Ahoj,

používám Form Factory na formuláře, kde mám importovanou funkci pro změnu renderingu formuláře…

Domníval jsem se, že je špatně udělaná, ale nejspíš je to vlastnost nette, které vykresluje input checkboxu uvnitr labelu checkboxu…

Takže výsledek:

<div class="form-check">
	<label class="form-check-label>
		<input class="form-check-input">
	</label>
</div>

a potřebuji:

<div class="form-check">
	<input class="form-check-input">
	<label class="form-check-label>
	</label>
</div>

aktuální php

...
elseif (in_array($type, ['checkbox', 'radio'], true)) {
                if ($control instanceof Nette\Forms\Controls\Checkbox) {
                    $control->getLabelPrototype()->addClass('form-check-label');
                } else {
                    $control->getLabelPrototype()->addClass('form-check-label');
                }
                $control->getControlPrototype()->addClass('form-check-input');
                $control->getSeparatorPrototype()->setName('div')->addClass('form-check');
            }
...

nějaká rada?
Díky moc

ViPEr*CZ*
Člen | 811
+
0
-

Proč to chceš vůbec takhle jinak? Vykresluje se to tak, protože když máš v labelu text, tak klikem na text se zaškrtne checkbox. Nešlo by šablonu vykreslit ručně a mapovat podle n:name?

Kamil Valenta
Člen | 761
+
0
-

ViPErCZ napsal(a):

Vykresluje se to tak, protože když máš v labelu text, tak klikem na text se zaškrtne checkbox.

To zajistí i id u inputu a for u labelu.

dakur
Člen | 493
+
+1
-

@Newer Viz toto vlákno: https://forum.nette.org/…k-radiolistu Řeší to tvůj problém?

@ViPEr*CZ* Typicky je to potřeba kvůli custom stylu checkboxu, aby se dal skrýt nativní a zobrazit vlastní přes pseudoelementy ::before a ::after pomocí input + label selektoru. Tipuju, že to bude i tento případ. Opakuje se to tady pořád dokola, tak bych zvážil, jestli neupravit API nette/forms, aby to nějakým způsobem umožňovalo. Něco jsem nastínil zde@DavidGrudl

ViPEr*CZ*
Člen | 811
+
0
-

@KamilValenta Ano to je alternativní způsob. ;-) Pokud v tom je css jak píše dakur, tak v tom zas nejsem tak zběhlej.

Ale koukám na ten link co dal dakur… díky… docela masakr. Já bych si to osobně vykreslil manuálně. Ale to tam kdosi zmiňuje, že v diskuzích je už moc. A wrapper je zas málo. Osobně ano je to moc. Ale zas mám šablonu více podobnou html oproti jen {control form}. Nevím… mám radši manuál na složitější formy… přijde mi, že to mám víc pod kontrolou.

dakur
Člen | 493
+
0
-

Já taky preferuju manuální vykreslení, protože typicky do HTML hodně zasahuju. Ale pokud to člověk běžně nedělá, dává mi smysl mít možnost ovlivnit DOM např. jen jednoho fieldu v PHP při definici formuláře.

dsar
Backer | 53
+
+2
-

With manual rendering it works with an old syntax (that I found here) with colon:

{input checkbox:}
{label checkbox:}

Editoval dsar (10. 3. 2021 16:01)

Newer
Člen | 47
+
0
-

Nechci to renderovat manualně,
Vím o tom že když kliknu na Label tak se zaškrtne checkbox, přesto je to v Bootstrap dokumentaci v poradí, do kterého to chci změnit.
což je primárně důvod, proč to chci… sekundárně, chci zjistit jak na to :-)

dakur
Člen | 493
+
+2
-

@Newer Koukni do toho odkazu, co jsem psal výše (klik), tam se to přesně řeší. Bootstrap to potřebuje právě proto, aby mohl udělat „hezký checkbox“.

Editoval dakur (11. 3. 2021 10:03)

emololftw
Člen | 81
+
0
-

dsar napsal(a):

With manual rendering it works with an old syntax (that I found here) with colon:

{input checkbox:}
{label checkbox:}

Works fine! For single checkbox. Thanks!