NOVINKA - Vstup do světa AI s ONLINE víkendovým kurzem Práce s umělou inteligencí od A do Z. Přihlas se ještě dnes!
NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.

Diskuze: Bootstrap - problém se zobrazením chybové hlášky u políčka s addonem

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Daniel Šup
Člen
Avatar
Daniel Šup:22.7.2018 23:41

Zdravím,

nyní vytvářím kontaktní formulář, kde uživatel vyplní část e-mailové adresy před zavináčem. Když uživatel nic nevyplní a odešle formulář, zobrazí se mu chybová hláška vedle textového pole s addonem. Zajímalo by mě, jak mohu dosáhnout toho, aby se chybová hláška zobrazovala pod textové pole addonem, nikoliv vedle něho. Kód formuláře s Bootstrap třídami uvádím níže:

<form id="needsValidation" novalidate>
                <div class="form-group">
                        <label for="email">E-mailová adresa</label>
                        <div class="input-group">
                                <input type="text" id="email" name="email" placeholder="adresa bez zavinace" class="form-control" aria-describedby="emailFeedback" required>
                                <span class="input-group-addon">@bazar.cz</span>
                                <div class="invalid-feedback">
                                        Musíte vyplnit část své e-mailové adresy.
                                </div>
                        </div>
                </div>
                <input type="submit" role="button" class="btn btn-primary" value="Odeslat">
        </form>

Zkusil jsem: Zkoušel jsem dát div se třídou invalid-feedback mimo element se třídou input-group. V tomhle případě se hláška nezobrazila. Dále jsem zkoušel pro třídu invalid-feedback nastavit vlastnosti clear: left a float: left.

Chci docílit: Chybová hláška se mi zobrazuje vedle textového pole a chci, aby se uživatele zobrazovala chybová hláška v případě odeslání formuláře s prázdným textovým polem pod textové pole s addonem. V přiloženém obrázku znázorňuji, jak se mi formulář zobrazuje a jak chci, aby se formulář zobrazoval.

 
Odpovědět
22.7.2018 23:41
Avatar
dez1nd
Člen
Avatar
Odpovídá na Daniel Šup
dez1nd:23.7.2018 7:51

sorry špatné vlákno

Editováno 23.7.2018 7:53
 
Nahoru Odpovědět
23.7.2018 7:51
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23.7.2018 8:45

Neco malo se da vycist k BT z online dokumentace. Ale obvykle zkouknu primo css. (Nechce se mi to ted zkoumat a take nevim, jakou mas verzi. Ja pouzivam 2-3)
Pravdepodobne tam bude vsechno floatovane, takze

clear:left a
float:none

by to melo poresit. U css zalezi na poradi, musis upravy css dat pod bootstrap. U css zalezi na priorite, musis spravne zapsat elementy, id, class. Spatne, ale muze byt funkcni, je pouziti important.

clear:left !important;
float:none !important;

Important prebiji priority el, id, class. Ale prebiji i sam sebe. No, proste pri vice important je vysledek nejisty. Prohlizece to vykresli spravne, ale ty jako uzivatel se v css snadno ztratis. Budes chtit prepsat neco, co jsi importantem prebil a nepujde ti to zadnym jinym zpsobem, nez znovu important. Hlavne, spousta lidi si neuvedomuje, co vsechno v css zapisem prepisuji. Si mysli, ze to dela neco jineho a ono to dela mnohem vic a i pro jiny html kod. Proto se to nedoporucuje.

Mno, takze, kdyby to neslo, kdyztak vytahni vsechen css, ktery se vztahuje ke kazdemu class v tom html kodu a ke kazdemu tagu ci id. idealne si to dej do zvlast souboru bez bootstrapu. Pokud se to nezobrazi stejne jako s BT, tak tam nemas jeste vsechno.

 
Nahoru Odpovědět
23.7.2018 8:45
Avatar
Daniel Šup
Člen
Avatar
Odpovídá na Peter Mlich
Daniel Šup:23.7.2018 10:35

Ahoj,
díky za odpověď. Používám Bootstrap 4 a do HTML ho importuji takto:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

Nastavení těchto dvou vlastností mi nepomohlo. Nyní jsem zkusil ještě k tomu nastavit šířku na 100% a třídě input-group nastavit vlastnost flex-wrap na hodnotu wrap. To už pomohlo. CSS styl, který jsem importoval do Bootstrapu, vypadá takto:

.input-group{
                flex-wrap: wrap;
}
.was-validated .invalid-feedback{
                clear: left !important;
                float: none !important;
                width: 100%;
}

Takto jsem to zkusil a chybová hláška se mi zobrazuje pod formulářovým políčkem s addonem.

Editováno 23.7.2018 10:37
 
Nahoru Odpovědět
23.7.2018 10:35
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:15.8.2018 15:39

https://getbootstrap.com/…nents/forms/
V dokumentaci se zobrazuje chybova hlaska pod polickem, ne? Malo by stacit zkopirovat kod. Jestli to chces jen posunout doleva, tak margin, padding, text-indent.

 
Nahoru Odpovědět
15.8.2018 15:39
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:15.8.2018 15:43

Koukam na ten kod, kdyz si das ctrl+f 'valid-feedback', nadpis Custom styles, tam kliknu odeslat a vsechny ty hlasky jsou pod policky. Nebo tam je jeste pod tim, nadpis Browser defaults, take zajimave reseni.

 
Nahoru Odpovědět
15.8.2018 15:43
Avatar
Daniel Šup
Člen
Avatar
Odpovídá na Peter Mlich
Daniel Šup:15.8.2018 22:22

Díky za odpověď. Tohle řešení jsem nezkoušel. Třídy jsem dával podle tutoriálu a měl jsem zafixováno tam nechat třídu invalid-feedback. Řešení v dokumentaci vypadá ještě o něco elegantněji.

 
Nahoru Odpovědět
15.8.2018 22:22
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:16.8.2018 9:28

To ja prave dokumentaci pouzivam dost casto u BT. Neznam prave jine zdroje a prislo mi, ze tam je to tak, jak to navrhovali a jak to bude fungovat spravne. Kdyz s tim udela upravy nekdo cizi, tak se nemuzes spolehnout, ze to opravi pro vsechny pripady.

 
Nahoru Odpovědět
16.8.2018 9:28
Avatar
Daniel Šup
Člen
Avatar
Odpovídá na Peter Mlich
Daniel Šup:16.8.2018 22:15

Díky za tvou odpověď. Máš pravdu, že když s tím udělá úpravy někdo jiný, tak se na to nemohu spolehnout. Zkusím si stáhnout verzi ze stránek Bootstrapu a řídit se tou dokumentací. Do toho kódu již nebudu nijak výrazně zasahovat, ale u dalších svých projektů to asi tak udělám.

Editováno 16.8.2018 22:15
 
Nahoru Odpovědět
16.8.2018 22:15
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:17.8.2018 8:58

Jako, ja delam upravy. Nemam presne html kod podle te stranky. Hlavne, mam 2.3 verzi, ta ne moc dobre pracuje s barvami a tak. Ale snazim se o co nejmene zasahu a ponechat puvodni reseni. Ani ne tak z lenosti jako spis, ze zapomenu kde a proc jsem to delal.
U css to resim tak, ze pridavam dalsi css. Takze nezasahuji do originalu. A taky v nem nemusim hledat, kde jsem delal upravy. Ano, mam tam nejaky css kod takhle navic, ale mam v tom aspon poradek :)

 
Nahoru Odpovědět
17.8.2018 8:58
Avatar
Daniel Šup
Člen
Avatar
Odpovídá na Peter Mlich
Daniel Šup:17.8.2018 20:59

Já používám verzi 4 z MaxCDN. HTML kód jsem také neměl podle té stránky. U css jsem také přidal další css, jinou možnost jsem neměl. Do originálu jsem nezasahoval. Já se také snažím o co nejméně zásahů a ponechat původní řešení, ale v tomto případě byly nějaké zásahy potřeba.

 
Nahoru Odpovědět
17.8.2018 20:59
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.