- Eltűnhet a Dinamikus Sziget
- Xiaomi 13T és 13T Pro - nincs tétlenkedés
- Samsung Galaxy Watch7 - kötelező kör
- Motorola Edge 50 Neo - az egyensúly gyengesége
- Szívós, szép és kitartó az új OnePlus óra
- Xiaomi 14 - párátlanul jó lehetne
- Samsung Galaxy S23 Ultra - non plus ultra
- Google Pixel topik
- Milyen okostelefont vegyek?
- Netfone
Új hozzászólás Aktív témák
-
Chrystall
senior tag
válasz
martonx
#2536
üzenetére
Na, csak megszültem a tökéletes, precíz megoldást a gomb méreteken és képernyőkön átívelő megjelenítésére:
https://codepen.io/bencuri/pen/XWjOooX
A ::before checked-hez nem kell az a content pötty meg a méretezés. Csak background, meg belső box-shadow.
Azért arra kíváncsi lennék, hogy miért allergiásak a content property méreteire a mobileszközök, de végülis mostmár ez indifferens.
A vicc amúgy, hogy számos CSS oldal foglalkozik ilyen gombok kreálásával, és a legtöbbnél amit találtam, ott az okoskodás meg a szövegelés, a végén a kód, és voálá, mobilon ugyanúgy a pötty kilóg szélre és kicsi. Tehát úgylátom sokan nem nagyon vették ezt a hibát még észre. Egy értelmes megoldást láttam, amikor radial-gradient-tel kreál a gombba pöttyöt, az mobilon precíz, viszont az meg desktopon csálé kissé. A méret egyezik, de kissé csálé. De vészmegoldásként még tűrhető.
-
Chrystall
senior tag
válasz
martonx
#2536
üzenetére
Ezen felesleges most vitatkozni, hogy a honlap stílusának most úgy általanosságban véve milyen a kialakítása. Ez egy régebbi lapom, eddig minden ment rajta flottul, semmi okom nem volt azt gondolni, hogy pont a gombokkal volna majd baj, vagy egyáltalán bármivel, ugyanis elég egyszerű és amúgy problémamentes lap. Másrészről meg eddig is volt egy űrlap rajta, 123webforms-tól, amin a radio gombok méreteződnek rendesen. Úgyhogy valahogy meg lehet ezt oldani, csak annak a kódját eddig nem bogarásztam, mert az meg végképp egy óriási ezerféle gombopciót felölelő katyvasz. De ezek szerint muszály lesz belerágnom magam, mert ennek a honlapnak a kialakításával jelenleg maximálisan elégedett vagyok, esztétikus, ráadásul ez a fajta design ami nekem van, nagyon idétlen lenne ha nem méreteződne. Persze, máshogy is megoldható lett volna, de csak a gombok miatt erről nem akarok lemondani, mert amúgy meg szuper az egész, és hiányozna.
-
Chrystall
senior tag
válasz
martonx
#2534
üzenetére
De én meg említettem, hogy az a baj, hogy a honlapom stílusa olyan, hogy a méretek nem fixek hanem relatívak nagy monitoron. Így nem lehet a Stock gombokat használni, mert a Firefox a stock gombot nem engedi méretezni. Mondjuk most beugrott, hogy akkor mobilra egy külön divből a stock gombok jelennének meg, amíg a teáltalad adott kód rejtve lenne, de ez se igazán jó, mert a viewport eltérések miatt van, hogy a stock gombok mivel nem méretezhetők, túl kicsik egyes mobilokon. Határeset, de ott is kéne a méretezés. Ez egy szép honlap, jó megoldás kellene, nem felemás.
Minden esetre vészmegoldásként max annyit tudok csinálni, hogy hagyom a pöttyöt hogy kitöltse a gombot, és akkor gond megoldva. De egyrészt nem igaz hogy egy szaros méretezhető gombot nem lehet a 21. században csinálni, a másik meg hogy amúgy van egy űrlapom amin jól méreteződik a gomb, majd arról kimásolom és adaptálom a kódot, csak az is ilyen third party űrlap egy tonna kóddal, valahol benne krikszkraksz idevágó részekkel, szóval kihámozni mindent egy év. A tied egyszerűbb meg elegánsabb lenne, csak ez a content dolog, ez kiakaszt.Meg nem is értem miért csinálja ezt a mobil, mikor az emulátorban jó, és így természetesen rá se tudok jönni mi a hiba, mert az emulátorban nem derül ki semmi.
-
Chrystall
senior tag
válasz
martonx
#2527
üzenetére
A multkor segítettél nekem ezzel a kóddal:
http://jsfiddle.net/v3f16xrL/
Már tesztelgettem, és jónak tűnt, de mégis van vele gond. Windowsban Chromeban és Firefoxban jó, és ha ezekben a Vizsgálat funkcióval emulálom mobileszközre szintén jó. Viszont ha konkrétan igazi mobileszközön kipróbálom, nem jó. iPad-en, vagy Samsung Galaxy-n néztem. A gond: minden méreteződik és helyén van ahogy kell, kivéve a kék pötty a gombban. Annál a font-size-t és a line-height-ot figyelmen kívül hagyja a böngésző, és emiatt csálén áll. Valamilyen oknál fogva nagyobb értékeket kell neki beállítani, mint amit te megadtál, és úgy lesz jó. Hiába hogy gépen az emulátorban úgy áll majd csálén, a rendes eszközön nem. Ez azért fura, mert a többi elemhez nem kell nyúlni azokat méretezi ahogy az emulátorban is. Mitől lehet ez? Azért idegesítő, mert pl. régi BlackBerry OS böngészőjében meg nem kell hozzányulni, az méretezi a pöttyöt is rendesen az eredeti kódoddal, így ha átírom, akkor meg ott is rosszul lesz a pötty pozícionálva.
Valami a content-ben szereplő ASCII kód értelmezésével lehet talán? Hogy ha megvan adva a content, akkor azt standard beállítás szerint kezeli, nem számít mit adsz meg stílusban rá?
Valami tipped volna hogy lehet rákényszeríteni a mobileszközt, hogy normálisan kezelje azt a pöttyöt, mint a BlackBerry OS?
-
Chrystall
senior tag
válasz
martonx
#2525
üzenetére
Semmi bajom nem lenne a natív radio gombokkal, ha Firefoxban méretezhető lenne. Pont azért van ez a szívás, mert nem lehet. Amúgy már rég túlennék a dolgon. A méretezhetőség az oldalam stílusa miatt meg fontos. Minden méreteződik, csak pont a radio gomb marad pici, ráadásul a rendelési oldalon, amiből a pénzem van. Nagy lábon lövés lenne úgyhagyni.
A @media query nem értem hogy könnyítene a dolgomon. H azt akarom, hogy egy 4K-s és egy sima HD képernyőn is ugyanolyan arányban mérezetten a Scale, akkor pontosan ki kell számolni az értékét, nem lehet viewport értékekkel trükközni. Kell bele pontosan a szám, nincs mit tenni. Hiába írsz bele egy vw értéket nem működik vele.
-
Chrystall
senior tag
válasz
martonx
#2523
üzenetére
Csak azért van annyi kód a Codepen-en mert egy templateből van az SCSS, amiben többféle gombvariáció van, és mindnek ebben a stylesheet-ben van a kódja.
Azért lenne jó a Scale, mert van a radio gombon belül az a kis pötty, ami akkor jelenik meg, ha egy gombra rákattintassz és aktív. Na, nekem nem sikerült kiokumlálni, hogy milyen arányban viszonyuljon a gomb méretéhez annak a mérete, úgy hogy mindig pont középen legyen ha méreteződik, és ne félre álljon, mert az idétlenül néz ki. A scale-lel biztos, hogy mindig tökéletes lesz.
A méretváltozás a gombra pedig azért kell, mert olyan az oldalam, hogy akármilyen képernyőn nézed, ugyan úgy néz ki a weblap, ugyanakkorák az arányok, nincs reszponzivitás meg semmi. Méreteződik minden, nem fix semminek a mérete. Így a Scale-ben is mindig változnia kell mekkorára nagyítsa vagy kicsinyítse a gombot hogy az arányok meglegyenek. Ehhez kéne az aktuális ablakméretet beolvasni az SCSS-ben egy változóba "px" unitban, abból már utána ki tudom számoltatni pontosan azzal az aránnyal, amivel az én oldalam méreteződik mekkora legyen a Scale. Na ezt nem tudom hogy kell. Hogy javascriptbe egyáltalán SCSS változót hogy írsz bele, lehet-e egyáltalán. A "vw"-vel nem lehet megcsinálni, mert azt nem írhatom a Scale-be egyrészt, másrészt mivel semmilyen unit nem mehet a Scale-be csak szám, a strip-unit-on át kell futtatnom az értékeket, most az mondom hogy strip-unit(100vw), annak semmi értelme nem lesz, mert nem egy pixelérték lesz a végeredmény, hanem 100. Azzal semmit nem tudok kezdeni. Pixelbeni érték kell, amiből le lehet csapni, hogy px, aztán a kapott számmal már tudnék mahinálni és beírni a Scale-be. Szerintem más út nincs rá, hogy a megfelelő értéket ki tudd számolni a Scale-be. Tudom nyakatekert, de így tökéletes lenne. Viszont már én is unom úgyhogy lehet megoldom sima width meg height: xy vw méretezéssel a gombra, lehet kicsit csálé lesz de ott egye meg mostmár a fene.
-
Chrystall
senior tag
válasz
martonx
#2521
üzenetére
Az nem jó mert a Scale-hez nem lehet megadni unit-ot. Ha Radio Boxot akarok csinálni, csak a Scale-lel lehet egyszerűen méretezni az egész gombot.
De eddig már eljutottam:
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
input, label {
$kepernyo:100vw;
$meret: strip-unit($kepernyo);
transform: scale($meret);}A calcot még nem írtam bele, de majd azt megcsinálom.
Ebbe hogy lehetne megoldani, hogy a $kepernyo értéke az az ablak aktuális mérete legyen? Ne VH hanem px-ben? Hogy lehet az beolvasni? -
Chrystall
senior tag
válasz
martonx
#2519
üzenetére
Igen ez nekem is eszembe jutott. Amit nem említettem, hogy olyan a weblap amibe menne a kód, hogy minden elem ami rajta szerepel calc-kal kapja meg a méretét, amit a képernyőméretből számol. Így viszont külön a margókra is most ezt be kell írogatnom. Azt hittem valahogy el lehet érni, hogy a Scale növelje a margót is egyúttal. De sebaj.
Viszont volna még egy kérdésem. Ami a fent linkelt kódban szerepel scaling:
input, label { transform: scale(x);annak is calcból jönne az értéke. Úgy, hogy: (calc(képernyőméret/1366px)). Ebből hogy tudom leszedni a px-et, hogy használhassam ezt a scale-hez?
-
Chrystall
senior tag
válasz
martonx
#2517
üzenetére
Érthető. Hát itt van akkor. Már most az előző problémára találtam megoldást, de hogy lehetne azt megcsinálni, hogy az input és label közötti margó is növekedjen ha Scale értéket állítok a kettőre? Az input meg label scaling a legalján található a CSS-ben:
https://codepen.io/bencuri/pen/NWRMQxj
-
Chrystall
senior tag
Valakinek volna tippje hogy ebben hogy lehetne a radio gombokat és a mellettük levő szöveget középre zárni függőlegesen? Sehogy se sikerül akárhogy próbálom:
<div class="valasztogomb">
<input type="radio" name="slider" id="slide2" checked="checked" data-href="paystandard.html">
<p style="display:inline-block;">Standard
</p>
<br/>
<input type="radio" name="slider" id="slide3" data-href="payregistered.html">
<p style="display:inline-block;">Registered
</p>
<br/>
<input type="radio" name="slider" id="slide4" data-href="paydownload.html">
<p style="display:inline-block;">Download
</p>
<br/>
<br/>
</div>
<div id="down_icon2"><a href="paymentstandard.html"><img src="files/theme/paypaybutton.png"></a></div>
Új hozzászólás Aktív témák
Hirdetés
- Easun iSolar SMW 11kW Twin Hibrid inverter // Dupla MPPT // BMS // WiFi
- GAMER PC : RYZEN 7 5700G/// 32 GB DDR4 /// RX 6700 XT 12 GB /// 512 GB NVME
- GAMER MSI LAPTOP : 15,6" 144 HZ /// i5 12450H /// 16GB DDR4/// RTX 4050 6GB/// 1TB NVME
- Manfrotto 055 magnézium fotó-videófej Q5 gyorskioldóval
- Sony ECM-W2BT
- Fujitsu USB Port Replicator PR09 docking station (1x5K vagy 2x4K felbontás) (DisplayLink)
- LG 45GS95QE - 45" Ívelt OLED / 2K WQHD / 240Hz 0.03ms / NVIDIA G-Sync / FreeSync Premium / HDMI 2.1
- Telefon felvásárlás!! Samsung Galaxy A13/Samsung Galaxy A33/Samsung Galaxy A53
- Honor X7B szép állapotban 6/128GB fekete / 12 hónap jótállással!
- BESZÁMÍTÁS! 4TB Samsung 870 EVO SATA SSD meghajtó garanciával hibátlan működéssel
Állásajánlatok
Cég: Promenade Publishing House Kft.
Város: Budapest
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest