Floating labels – proč nejsou všechny prvky designované?

Hraji si s APEXem již nějaký čas a hodně jsem se těšil na novinku ve verzi 18, kterou byly právě tzv. Floating labels. Některé z prvků však nejsou přizpůsobené tomuto nastavení.

Proč tomu tak je? A jak je mohu snadno dostylovat? Totéž i u required položek.

Otázky „proč“ jsou vždy záludné a ani my u nás v APEX solutions lidem v Oracle a vývojářům do hlav nevidíme. Možná je to jen strach z velkých improvementů, dopad na jednotlivé prvky, funkčnost, … Těžko říci.

Je docela důležité si všimnout, že ty pravé Floating labels nalezneme na itemech jako Number field a Text field (input type="text"...), Text area nebo Select list. Druhou skupinou jsou stylizované prvky bez floating labelu jako jsou například Date picker, Display only nebo Popup LOV. Teprve poslední skupinou jsou prvky s daným obsahem, které postrádají jak floating labels, ale i stylizaci, kdy vypadají jako naše již zaběhnuté optional/required above templaty, což samozřejmě hlavně v případě povinných položek může být hodně nežádoucí efekt, když jednou máme v rohu červený trojuhelník a podruhé hvězdičku.

Ke smůle nás detailistů nás nezachrání ani APEX 19, kde jsem si pro toto řešení udělal jednoduché demo a použil výše uvedené a nejčastěji užívané itemy. CSS classy a případné úpravy by měly být v porovnání s verzí 18 (minimálně ve většině úkonů) totožné…

Každopádně druhá otázka „jak“ je o poznání zajímavější. Nehledejme výmluvy a pojďme rovnou na to – jedno z hlavních hesel nás APEXářů je přeci #LetsWreckThisTogether

V první řadě si řekněme, čeho chceme ve výsledku docílit – překrývat obsah floating textem? To asi ne… Takže o co nám půjde? Zlehka odsadit obsah itemů, dát jim nějaký obdobný border a možná trochu barevně podložit… A u required zabít hvězdičku a nahredit trojuhelníčkem do levého rohu. Zní to jednoduše, že?

Nebudeme však opětovně vynálézat kolo a mrkneme na stylizované prvky a „ukradneme“ již použité CSS pro definici wrapperu, borderů, barev a pohrajeme si lehce s pár paddingy a … Výsledek je na světě…

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* border, barvy */
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--file .t-Form-inputContainer .t-Form-itemWrapper ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--checkbox .t-Form-inputContainer .t-Form-itemWrapper ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--radiogroup .t-Form-inputContainer .t-Form-itemWrapper ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--yes-no .t-Form-inputContainer .t-Form-itemWrapper ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--shuttle .t-Form-inputContainer .t-Form-itemWrapper {
border: .1rem solid #dfdfdf;
border-radius: 2px;
background-color: #f9f9f9;
}
/* chovani pri najeti mysi */
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--file:hover .t-Form-inputContainer .t-Form-itemWrapper ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--checkbox:hover .t-Form-inputContainer .t-Form-itemWrapper ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--radiogroup:hover .t-Form-inputContainer .t-Form-itemWrapper ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--yes-no:hover .t-Form-inputContainer .t-Form-itemWrapper ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--shuttle:hover .t-Form-inputContainer .t-Form-itemWrapper {
background-color: #fff;
}
/* pro file browser */
.apex-item-file+.apex-item-file-dropzone {
padding: 0 .8rem;
}
/* file browser a shuttle maji extra margin, proto top padding nulujeme narozdil od ostatnich itemu */
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--file .t-Form-inputContainer .t-Form-itemWrapper > * ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--shuttle .t-Form-inputContainer .t-Form-itemWrapper > * {
padding: 0 .8rem .4rem;
}
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--checkbox .t-Form-inputContainer .t-Form-itemWrapper > * ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--radiogroup .t-Form-inputContainer .t-Form-itemWrapper > * ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--yes-no .t-Form-inputContainer .t-Form-itemWrapper > * {
padding: 2.2rem .8rem .4rem;
}
/* pro checkboxy a radio groups */
.apex-item-group--rc input+label {
margin: .2rem 0;
}
/* pro switch */
.t-Form-fieldContainer--floatingLabel .apex-button-group .a-Button {
padding: .2rem 2.4rem;
}
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--checkbox .t-Form-label ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--file .t-Form-label ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--radiogroup .t-Form-label ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--shuttle .t-Form-label ,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--yes-no .t-Form-label {
padding: .4rem .8rem 0;
}

Všechny stylované itemy nyní odpovídají stylizací ostatním a díky lehkému pixeltuningu na paddingách dodržují i nějaká UX pravidla v jednotnosti jednotlivých prvků a to hlavně, co se týká jejich height. Ostatně v uvedeném CSS kodu jsou komentáři vyznačené jednotlivé elementy, která potřebovaly extra péči jako například snížení marginu u checkboxů a radio buttons.

Stylizace je tedy připravená a pro itemy, kterým jsem nevěnoval konkrétní péči je postup velice obdobný – dejte jim nejprve border, background ať znáte hranice a pak hledejte východiska dále. Ale my tu máme ještě jeden malý rest – označení required itemů.

Hvězdička u povinných položek je prvek klasických labělů ať už na řádku nebo nad prvkem, ale my tu máme úžasné floating labely, chceme to sjednotit na malý trojúhelníček v levém horním rohu… A opět není nic snazšího než vzít již vytvořené řešení a implementovat, ale…

Zkusili jste to, že? Napálili jste se? Nic se neděje? Ano – vývojáři v Oracle totitž pseudo element ::before přebíjejí pomocí attributu display: none; tudíž je třeba toto přebít – a není nic snazší než k tomu dojít přes display: initial;. A když tak učiníte, zjistíte, že prvek na obrazovce byl po celou dobu vašeho pátrání – hotový a připravený. A totéž platí pro hvězdičku – je všude, ale jen u vybraných elementů má při floating templatě itemu opacity: 1;. Ve výsledku nám tedy plně stačí doplnit předcházející kod o 2 atributy a kýžený výsledek máme před sebou…

CSS

56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/* zobrazeni cerveneho trojuhelniku v levem hornim rohu itemu */
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--checkbox.is-required .t-Form-label:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--checkbox.is-required:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--file.is-required .t-Form-label:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--file.is-required:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--radiogroup.is-required .t-Form-label:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--radiogroup.is-required:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--shuttle.is-required .t-Form-label:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--shuttle.is-required:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--yes-no.is-required .t-Form-label:before,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--yes-no.is-required:before {
display: initial;
}
/* skryti cervene hvezdicky (asterisku) */
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--checkbox.is-required .t-Form-label:after,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--file.is-required .t-Form-label:after,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--radiogroup.is-required .t-Form-label:after,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--shuttle.is-required .t-Form-label:after,
.t-Form-fieldContainer--floatingLabel.apex-item-wrapper--yes-no.is-required .t-Form-label:after {
opacity: 0;
}

Veškeré classy a atributy jsou voleny s ohledem na zbytek APEX UI, tudíž při zachování jednotlivých elementů prvků a podmínění CSS selektorů pouze pro floating labels (.t-Form-fieldContainer--floatingLabel), zachováte funkčnost itemů v ostatních podobách/templatách.

fl-feat fl-3 fl-2 fl-1

Vladimír Opolský

Oracle APEX developer, HTML, CSS, JavaScript, jQuery, PL/SQL, ...

Komentáře

avatar
  Subscribe  
Upozornit na

Můžeme Vám s něčím poradit?

S vývojem aplikací v APEXu, Javascriptem, ...

Váš dotaz bude zveřejněn, jakmile na něj jeden z našich expertů odpoví. Vaši e-mailovou adresu nikde uvádět nebudeme.

Vyplňte prosím požadovaná pole.