Hirdetés
- Mi a labubu? – és pár fontos dolog, amire idén rágugliztál
- Olyan erőre tettek szert a böngészők, ami átformálhatja a piacot
- Az ötlet jó, de milyen a kivitelezés? Teszten a Chieftec Kockája
- Megbüntették, ezért feloszlatná az EU-t Elon Musk
- Egészen különleges funkciókat kaptak a Lian Li RS sorozatú tápjai
Új hozzászólás Aktív témák
-
T J
tag
Nem tudom, h megoldható-e CSS-ben amit szeretnél: CSS - Use calc() to keep widths of elements the same
Dinamikusan lehet, hogy csak js-el fog menni, illetve bele lehet erőszakolni a js-t css-be, de az nem tiszta css, illetve lehet js-ben is használni css-t, de akkor nem minden stílus lesz a css fájlben egy helyen.
width: calc(...) -al is lehet számolni, de csak az őt tartalmazó elem szélességéből. Másik vele egyenrangú társelem szélessége csak fix értékként szerepelhet a képletben. Pl:
.td3 {width: calc( 100% - 200px ); } ahol 100% az a td3-at tartalmazó tr szélessége, a 200px pedig a sorban levő többi elemé (td1, td2) marginnal, borderrel együtt.
Szóval ha ismered minden oszlopban a leghosszabb elem méretét, akkor érdemes az adott osztályú elemeknek min-width-ként megadni, és az ismeretlen szélességű mezőét a calc()-al megadni, kitöltve így a maradék helyet.
De az inputnál nem tudod előre hogy nem az lesz-e a leghosszabb mező, amit épp be fog írni a user. Így vagy maximálod a beírható karakterek számát, vagy minden beírt karakter után lefuttatsz js-el egy ciklust, amiben összehasonlítod, hogy a beírt szöveg hosszabb-e, mint a már meglévő leghosszabb szöveg az oszlopban, vagy a megadott szélességnél. És ha hosszabb, akkor növeled a cella és táblázat szélességét minden egyes beírt karakternél. De ez sok felesleges számítás, és ha betöltéskor is így állapítod meg a szélességet, min-width helyett, akkor lassabban fog betöltődni az oldalad.Ezen kívül nem illik egy tr-be th-t és td-t is tenni, csak az egyiket. És div-et se erőltetném bele td-be, mert rontja a táblázatod formázhatóságát. Inkább használj div helyett <span>-t.
-
martonx
veterán
"Persze lehet tippelni a betűk számából, eddig is ezt csináltam, de pont ezért keresek CSS megoldást, hogy ne kelljen."
De érted, olyan megoldás nem létezik, ami egységesen jó 20 karakterre is, meg 500-ra is. Lehetőségeid: min-width használata vagy le tudod csapni a túl hosszú szövegek végeit "..."-ra (tooltipként meg mondjuk kitenni a teljes szöveget), vagy be tudod törni a túl hosszú szövegeket (ez az, ami most nem tetszik neked). Neked kell kitalálnod, hogy mi a jó neked. Ami biztos nem jó, hogy karakterenként számolgatsz bármit.A második problémád meg az alapján a jsfiddle alapján sajnos még mindig nem világos. Nem lehetne olyan jsfiddle-t csinálnod, ahol látszódik is a probléma?
-
Új hozzászólás Aktív témák
- Máris megvásárolható az Ulefone új RugKing szériája
- Elindult a One UI 8.5 béta program
- Okos Otthon / Smart Home
- Mibe tegyem a megtakarításaimat?
- Formula-1
- Itt a Valve GŐZGÉP — Steam Machine, mi vagy te? 🧐
- Megbüntették, ezért feloszlatná az EU-t Elon Musk
- Genshin Impact (PC, PS4, Android, iOS)
- Spórolós topik
- Milyen routert?
- További aktív témák...
- Samsung Galaxy S25+ 12/512GB, Normál, Kártyafüggetlen, Töltővel, Dobozzal, 1 Év Garanciával!
- Western Digital Purple 1TB / 1000 GB HDD 3,5" WD10PURX ÚJ, 0 üzemórás eladó!
- iPhone 13 Éjfekete - 128 GB - 98% Akkumulátor (iSamurai cserélt)
- DELL Precision 5540 Workstation i7-9850H Nvidia Quadro T2000 32GB 512GB 15.6" 1év garancia
- Eladó gamer PC i9-9900K (3.6 GHz) / RTX 2070 / 32GB
- Telefon felvásárlás!! iPhone 13 Mini/iPhone 13/iPhone 13 Pro/iPhone 13 Pro Max
- Lenovo Thinkbook 16 G6 WUXGA IPS Ryzen7 7730U 16GB 512GB SSD Radeon RX Vega8 Win11 Pro Garancia
- BESZÁMÍTÁS! ASROCK B650M R7 8700F 32GB DDR5 1TB SSD RX 7900XT 20GB Be quiet Pure Base 500FX EVGA750W
- iPhone 14 Pro Max 256GB Space Black -1 ÉV GARANCIA -Kártyafüggetlen, 100% Akkumulátor
- OnePlus Nord 2T 128GB, Kártyafüggetlen, 1 Év Garanciával
Állásajánlatok
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest
Cég: ATW Internet Kft.
Város: Budapest