Autor | Zpráva | ||
---|---|---|---|
Gray blogger Profil * |
<section id=dialog class=ui-dialog> <p>Prosím, vyplňte i tuto položku:</p> <p id=qitem></p> </section> Jak mám nastavit css aby se po kliknutí na tlačítko objevil dialog buďto horizontálně uprostřed nebo nad tlačítkem? V chromu při simulaci mobilního zařízení dialog obvykle není vidět: section.ui-dialog { position: relative; top: -155px; left: -125px; background-color: lightyellow !important; background-image: url(grafika/back4.png); font-size: 11px; border: solid 2px gray; } section#dialog { padding-left: 7px; font-size: 13px; } section.ui-dialog p#qitem { font-size: 13px; font-weight: bold; } div.ui-dialog-titlebar { position: relative; left: -125px; top: -125px; z-index: 100; float: right; padding-right: 50px; } 4.bp.blogspot.com/-kU125J-GOHA/XZGY1_C5B4I/AAAAAAAADoI/sEb8ONLlDX4g17s-JfG_ULhzZ-IrmW_lwCNcBGAsYHQ/s1600/temp.png To tlačítko o kterém je řeč je "Další tlačítko" případně "Odeslat data". |
||
RastyAmateur Profil |
#2 · Zasláno: 1. 10. 2019, 14:24:09
Gray blogger:
Udělal bych to nějak hezky přes position: fixed , s tou relativní pozicí ti tu asi moc neporadím, protože nevím, kde přesně se to vlastně nachází a co vůbec jde. Do vlastností top , left , apod. můžeš zadávat i například procenta, či jednoty vh, vw. Ty by ti mohly pomoci převážně pokud to budeš řešit nakonec přes tu fixní pozici, obzvlášť s kombinací s funkcí calc().
|
||
Gray blogger Profil * |
Tyhle jednotky jsem neznal. Dík. Jinak jde o to že se kliká na radioboxy tak nevím jak to lze udělat fixně. Fixně to je jako absolutní pozice od začátku těla dokumentu?
Jinak mohu se tě ještě zeptat na to proč v chromu když se dívám na ty stránky na mob. zař. Tak při měřítku 50% nebo 53% stránky vypadají normálně na všech mobilech, ale při 100% se mi celý formulář nevejde na stránku Např. Galavy S5 končí na 4-tém z 5-ti fieldsetu. Nexus to samé. Mohu přes media nastavit výšku body fixně, ale je to divné řešení a já hlavně nevím jestli je to chromem nebo mobilem. Nejhůř to zobrazuje iPad při šířce 768. Firefox nedělá problémy ani se změněnou šířkou okna. Třeba je to tím starým Chromem... Ipad nezobrazí 4. a 5. fieldset a z 3. zobrazí jen tři radioboxy. |
||
RastyAmateur Profil |
#4 · Zasláno: 1. 10. 2019, 18:52:47
Gray blogger:
„Např. Galavy S5 končí na 4-tém z 5-ti fieldsetu. Nexus to samé.“ Nikdy jsem to nezkoumal, ale vždy jsem se domníval, že když si v Chromu nastavíš např. Galaxy S5, tak ti to jen poupraví ty rozměry okna tak, aby ten viewport byl totožný s tím, co je na tom mobilu (respektive ti to upraví okno na rozměry displeje toho mobilu). Tudíž nehledej chyby v mobilech, ale v tom, od jakého breakpointu se ti chyba ne/zobrazuje. Což mi tak přivádí na myšlenku, když zkoumáš mobily a tablety, děláš to vůbec responzivně? Říká ti něco @media v CSSkách? Nebo máš prostě stránku, co na počítači vypadá dle tvých představ a jen se divíš, jak to, že na mobilu to hezky nevypadá? Neber to jako urážku, není to tak míněno, ale třeba v té ukázce kódu vidím prostě jen CSSka bez @media a spoustu nějakých magických pixelových konstant...
|
||
Gray blogger Profil * |
Odesílám header
<META name="viewport" content="width=device-width,initial-scale=1"> A ve stylopisu mám @media screen and (max-width: 480px) { h1 { font-size: 2.2em; } } @media screen and (min-width: 480px) { h1 { font-size: 2em; } } Podobně nastavuji velikost písma u legend a span. Mobilní verze na Chromu vypadá dobře. Na mobily to mám v em, na PC to mám v px. |
||
RastyAmateur Profil |
#6 · Zasláno: 1. 10. 2019, 19:04:01
Gray blogger:
No tak to už se mi zdá z principu špatně, tobě ne? Že tam máš někde pozici -155px a má to vystačit i pro mobily?
Zkus, prosím, nějak dobře zformulovat svůj dotaz, podpoř to živou ukázkou a zkusíme to nějak vyřešit :) |
||
Gray blogger Profil * |
#7 · Zasláno: 1. 10. 2019, 19:05:26
PS: Dnes asi už nic, ale od zítra řeším AJAX, přihlašování, registraci a odesílání emailů, takže se teď nechci tou kosmetickou změnou zabývat. Ono se to dá vcelku efektivně vyřešit přes obyčejný alert, ale ten nevypadá tak krásně jako na PC to dialogové okno.
|
||
Časová prodleva: 5 let
|
0