• Úvod
  • Koš
  • Tip: Přidání hvězdičky za povinné pole na úrovni…

Tip: Přidání hvězdičky za povinné pole na úrovni CSS

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
před 17 lety
Jan Tvrdík
Nette guru | 2595
+
0
-

Konečně jsem objevil, na co se dá použít CSS vlastnost content. Dá se tím např. přidat červená hvězdička za všechny povinné pole. Problémem ale je, že to funguje jen moderních prohlížečích (tj. Opera 9.6 a FF 3.0) a bez zapnutého CSS uživatel hvězdičku neuvidí. Na druhou stranu je to jednodušší, než si upravovat renderer.

form label.required:after {
	content: '*';
	color: red;
}
před 17 lety
Ola
Člen | 385
+
0
-

Tak podle mě by bylo lepší $renderer->wrappers['label']['suffix'] = "*"; už z důvodu kterej si psal (aneb IEčkáři mají smůlu) a když tam pak napíšeš, že hvězdička znamená povinný pole a uživatelé IE ji neuvidí, tak to vypadá divně ..

A přes css by se nastavilo že vše co je v .required je červeně (prostě styl hvězdičky) a .required label by se přenastavil zpět třeba na černou ..

Editoval Ola (3. 3. 2009 7:46)

před 17 lety
Honza Marek
Člen | 1664
+
0
-

Pak by asi ještě šlo třeba pomocí jQuery něco takového:

// hvězdičky jen pro lidi s JS
$("form label.required").each(function () {
	$(this).text($(this).text() + "*");
});

Ale rozhodně by bylo lepší, kdyby možnost hvězdičkování byla už v nette.

před 17 lety
morousej
Člen | 18
+
0
-

Ola napsal(a):

IEčkáři mají smůlu) a když tam pak napíšeš, že hvězdička znamená povinný pole a uživatelé IE ji neuvidí, tak to vypadá divně ..

Jednoduché řešení, informaci, že hvězdička je povinné pole přidat přes tohle CSS :)

před 17 lety
Jan Tvrdík
Nette guru | 2595
+
0
-

Ola napsal(a):
Tak podle mě by bylo lepší $renderer->wrappers['label']['suffix'] = "*";

Lepší by to určitě bylo, ale muselo by to fungovat :) V současnosti to přidá hvězdičku k úplně všem popiskám.

před 17 lety
Jod
Člen | 701
+
0
-

Dobrý nápad. Tak šup šup dať feature request =))

před 17 lety
Ola
Člen | 385
+
0
-

Jan Tvrdík napsal(a):
Lepší by to určitě bylo, ale muselo by to fungovat :) V současnosti to přidá hvězdičku k úplně všem popiskám.

Oh my god.. já sem pako :) Then sorry :)

před 17 lety
A.
Člen | 87
+
0
-

Ja pouzivam nasledujici a zda se mi, ze to funguje dobre:

tr.required th { background:url('star-red.png') no-repeat center right; padding-right:18px;}
před 17 lety
PetrP
Člen | 587
+
0
-

Uj uj uj. Přidávání tak důležité věci jako zobrazení povinnosti vyplnění parametrů rozhodně nesmí být závislé na css (respektive na vlastnosti kterou podporuje jen par prohlížečů) a ani na JS kterej by nemusel 100% fungovat ve čtečkách, mobilních prohlížečích atd.

Není nic lepšího než mít na černo-bílem monitoru: „Červené položky jsou povinné“ a podobně.

před 17 lety
Jod
Člen | 701
+
0
-

Omfg, kto už má v tejto dobe čiernobiely monitor nak sem napíše a pôjdem mu kúpiť nejaký farebný za stovec do bazaru, aj keď 8metrov do dĺžky :D

před 17 lety
PetrP
Člen | 587
+
0
-

Už jsem se s tím jednou setkal (špatný kabel do monitoru a nevyděl jsem všechny barvy ;])
Ale byl to spíš extrémní příklad. Přesto označovat povinně položky jen barvou je zlo při vypnutém css nebo hlasové čtečce. Hlavně mi ale šlo o to nedělat stejnou chybu z hvězdičkou a dávat jí přes css ani jako obrázek a už vůbec ne jako téměř nepodporovanou vlastnost content.

před 17 lety
PetrP
Člen | 587
+
0
-

Jod napsal(a):

Omfg, kto už má v tejto dobe čiernobiely monitor nak sem napíše a pôjdem mu kúpiť nejaký farebný za stovec do bazaru, aj keď 8metrov do dĺžky :D

OT: Jestli myslíš nabídku vážně tak bych si u tebe pár starých monitorů vyměnil za 8metrový barevný ;]]]

před 17 lety
Jod
Člen | 701
+
0
-

No ale 15"palec, 8metrov má len dozadu :D a musíš so poń prísť do košíc :D , budú ti stačiŤ tri farby? Čierna, biela a červená na validáciu. Skryjem ti tam aj prekvapko v podobe tikajúcich hodiniek ,))) .

Inak pravda, hviezička napevno je asi najlepšie riešenie. To by nebol problém nejak to tam zadrôtovať hádam.

před 17 lety
PetrP
Člen | 587
+
0
-

Jod napsal(a):

Inak pravda, hviezička napevno je asi najlepšie riešenie. To by nebol problém nejak to tam zadrôtovať hádam.

Určitě, david to má i v něčem jako todo listu. Jen jsem se dle diskuze začal bát že se to bude ubírat směrem css a js ;]

Editoval PetrP (30. 3. 2009 14:14)

před 17 lety
Tomik
Nette Evangelist | 485
+
0
-

Tip: Přidání hvězdičky za povinné pole na úrovni HTML :) …

před 17 lety
Nilp
Člen | 65
+
0
-

Ono nejde ani tak o černobílý monitor jako spíš o přístupnost pro barvoslepé ;)

před 16 lety
David Grudl
Nette Core | 8285
+
0
-

Vyřešeno v revizi 349.

$renderer->wrappers['control']['requiredsuffix'] = " *";
// nebo
$renderer->wrappers['label']['requiredsuffix'] = " *";
před 16 lety
Honza Marek
Člen | 1664
+
0
-

Ještě to pořád neumí červenou hvězdičku (nebere Nette\Html), ale to už je naprostý detail.

před 16 lety
mejla
Člen | 14
+
0
-

Zrovna jsem se s tím asi hodinu mordoval – snažil jsem se tu hvězdičku umístit do nějakého html elementu např. em, abych ji mohl zacílit přes CSS a nepodařilo se…

před 16 lety
pmg
Člen | 372
+
0
-

Možná by bylo dobré nepřidávat suffix, pokud je label prázdná.

před 16 lety
mejla
Člen | 14
+
0
-

Teď jsem to úplně nepochopil, měl jsem na mysli dosáhnout:

<th><label class="required" for="frmanyForm-name">Název <span>*</span></label></th>

css: label.required span{color:#f00}
(*) Ve stejné barvě s label je ve formuláři lehce přehlednutelná..

Editoval mejla (31. 7. 2009 8:09)

před 16 lety
PetrP
Člen | 587
+
0
-

mejla napsal(a):

Zrovna jsem se s tím asi hodinu mordoval – snažil jsem se tu hvězdičku umístit do nějakého html elementu např. em, abych ji mohl zacílit přes CSS a nepodařilo se…

Třeba takhle?

$renderer->wrappers['label']['requiredsuffix'] = Html::el('spam','*');
před 16 lety
mejla
Člen | 14
+
0
-

PetrP napsal(a):

mejla napsal(a):

Zrovna jsem se s tím asi hodinu mordoval – snažil jsem se tu hvězdičku umístit do nějakého html elementu např. em, abych ji mohl zacílit přes CSS a nepodařilo se…

Třeba takhle?

$renderer->wrappers['label']['requiredsuffix'] = Html::el('spam','*');

No to jsem si právě taky myslel :-) ale přidá se htmlspecialchars()

Název<span>*</span>

viz. Honza M: Ještě to pořád neumí červenou hvězdičku (nebere Nette\Html), ale to už je naprostý detail.

Je to možná zásadní detail, protože hvězdička stejné barvy se lehce přehlédne – tudíž nemá smysl..

Editoval mejla (2. 8. 2009 18:02)

před 16 lety
PetrP
Člen | 587
+
0
-

Aha promiň, v tom případě to je bug.

Potřebovalo by to upravit na neco v tomto duchu:

//ConventionalRenderer
	public function renderLabel(IFormControl $control)
	{
		$head = $this->getWrapper('label container');

		if ($control instanceof Checkbox || $control instanceof Button) {
			return $head->setHtml(($head->getName() === 'td' || $head->getName() === 'th') ? '&nbsp;' : '');

		} else {
			$label = $control->getLabel();
			$suffix = $this->getValue('label suffix');
			$requiredsuffix = $control->getOption('required') ? $this->getValue('label requiredsuffix') : '';
			$suffix = $suffix instanceof Html ? clone $suffix : Html::el(NULL)->setText($suffix);
			$requiredsuffix = $requiredsuffix instanceof Html ? clone $requiredsuffix : Html::el(NULL)->setText($requiredsuffix);
			if ($label instanceof Html) {
				$label->add($suffix)->add($requiredsuffix);
				$suffix = $requiredsuffix = '';
			}
			return $head->setHtml((string) $label . $suffix . $requiredsuffix);
		}
	}
// a taky případně upravit requeredsuffix v ConventionalRenderer::renderControl()
před 16 lety
David Grudl
Nette Core | 8285
+
0
-

fixnu

před 16 lety
David Grudl
Nette Core | 8285
+
0
-

Nejsem si s odstupem času jist – tohle téma je vyřešené?

před 16 lety
Honza Marek
Člen | 1664
+
0
-

Ještě by to mohlo brát Nette\Web\Html, aby hvězdičce šla dát třída a tudíž obarvení. Jinak vpodstatě jo.