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

Daniel Šup

Člen

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

dez1nd

Člen

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

Peter Mlich

Člen

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

Daniel Šup

Člen

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

Peter Mlich

Člen

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

Peter Mlich

Člen

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

Daniel Šup

Člen

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

Peter Mlich

Člen

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

Daniel Šup

Člen

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

Peter Mlich

Člen

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

Daniel Šup

Člen

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

Naučíme tě pracovat na home-office.

Zjistit více...

Naučíme tě pracovat na home-office.

Více info »

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.