ugrás a tartalomhoz

CSS tartalom méretezés

mind1 valami név · 2023. Feb. 27. (H), 12.39
https://codepen.io/nagyarc/pen/dyqOdOG
Egy három oszlopból álló, táblázatszerűen megjelenő listát akarnék megjeleníteni, kb. olyan formában, ahogy egy linuxos ls -l kimenete néz ki.
Az első két oszlop fix szélességű lenne, az utolsónak viszont ki kellene töltenie a maradék helyet. Na ez nem jön össze sehogy. Annyit még sikerült elérni, hogy a fenti kódban "intern"-nek nevezett osztályba tartozó div felvegye a maradék hely méretét, de a benne lévő elem/elemek már ragaszkodtak a saját méretükhöz.
Ezt tényleg nem lehet trükközés nélkül?
‹ Modal dialog JS tutorial? ›
 ■
1

Legfontosabb: box-sizing

Endyl · 2023. Feb. 27. (H), 14.12
Értelmes méretezéshez a legfontosabb css szabály (és itt meg is oldja a date túllógását):

*, *::after, *::before {
  box-sizing: border-box;
}
Az alapértéke content-box, tehát pl. a tartalom lesz 100% és még arra jön rá a padding és border vastagsága. Border-box esetén meg ezek összessége lesz 100%.

Amivel még lehet szívni, hogy egyes elemeknek (pl inputok) van sunyi, böngészőből jövő min-width-je például. Szóval a vizsgálóban érdemes bekapcsolni, hogy azokat a szabályokat is mutassa, amit a böngésző ad alapból.

De ilyen maradék hellyel kapcsolatos méretezésekhez még jobb vagy a flexbox, vagy a grid.
2

A grid most direkt kimaradt,

mind1 valami név · 2023. Feb. 27. (H), 14.30
A grid most direkt kimaradt, emlékezve a régebbi nagy szopásokra.
Flexbox (az azonos a display:flex; verzióval?) esetén viszont figyelmen kívül hagyja a text-align:right; beállítást.
Ettől függetlenül, a jelenlegi beállítások után berakva a box-sizing-t, nem változik a látvány: az utolsó (.date) oszlop csak akkora, amekkora a beleírt szöveg, nem tölti ki a fennmaradó helyet.
Megint ott tartok, mint egy-két éve: nem akarom elhinni, hogy ilyen primitív problémákra csak eszetlen bonyolult kerülőutak vannak korrekt megoldás helyett. :(
4

A grid nem eszetlen

Endyl · 2023. Feb. 27. (H), 15.04
A grid nem eszetlen bonyolult:

.frame {
  display: grid;
  grid-template-columns: 30em 16em 1fr;
}
Ha meg azt szeretnéd, hogy az .intern-ek gyerekei teljes szélességűek legyenek, akkor block display-jűek legyenek, ne inline-block.

Vagy az .intern-ek legyenek display: flex; flex-direction: column;.

És ha már grid, akkor ne margin legyen a cellákon, hanem gap a szülőn.

*, *::after, *::before {
  box-sizing:border-box;
}

.frame {
  display: grid;
  gap: 2px;
  grid-template-columns: 30em 16em 1fr;
}

.intern {
  display: flex;
  flex-flow: column nowrap;
  padding: 2px;
  border: 2px solid orange;
}

.intern > * {
  border: 1px solid black;
  padding: 2px 5px 2px 5px;
}


.size {
  text-align: right;
}
3

Ez most az amit akartam...

mind1 valami név · 2023. Feb. 27. (H), 14.53
https://codepen.io/nagyarc/pen/bGxBKga
Egy a baj vele: nem értem, hogy mi miért van úgy, ahogy.
Ez a kisebbik gond. A nagyobb, hogy az MDN doksit sem tudom értelmezni. Azt hiszem, jobb lesz, ha feladom, a javascriptbe meg bele sem kezdek. :(
COBOL, PL/I volt az én világom, meg az IBM/360 Assemblere. :)
5

Gridre és flexre tényleg

Endyl · 2023. Feb. 27. (H), 15.07
Gridre és flexre tényleg ajánlom a linkeket, amit fentebb küldtem. Szépen le is van rajzolgatva a legtöbb helyen, hogy mi, mit csinál.
6

Köszi, nézegetem, csak félig

mind1 valami név · 2023. Feb. 27. (H), 16.25
Köszi, nézegetem, csak félig vakon egyre nehezebb. ;)