Ma-Kas
KPCKevin Powell - Community
•Created by Ma-Kas on 10/12/2024 in #front-end
Vertical writing-mode figcaption refuses to shrink past certain point
Got a banner component with a vertical figcaption (thanks designers). It's normally part of a bigger component, but I simplified it for the issue display (so excuse any seemingly unneccessary extra tags and classes). The figcaption should always take up a % of the parent's height (=the image height). I can't hardcode any sizes, as all content comes from a cms and is only known at runtime. Things work, but the figcaption refuses to shrink past a certain, seemingly random point.
To check issue: run the codesanbox, open preview, shrink preview window.
https://codesandbox.io/p/devbox/3z3qjm
5 replies
KPCKevin Powell - Community
•Created by Ma-Kas on 7/6/2024 in #front-end
box-shadow blur causes gap around fixed header element
1 replies
KPCKevin Powell - Community
•Created by Ma-Kas on 4/9/2024 in #front-end
Fixed header within card, when card itself can scroll out of view
Got a simplified dashboard setup in the codepen.
The div
page_main_content is scrollable with a fixed page_main_content_header of variable (thus unknown) height and a body page_main_content_body. The body contains a card (of dynamic height) and pagination. The card itself has a header card_header that is fixed height and should stay in place when scrolling the page_main_content.
Issue is I can't use position:fixed on the card_header as the card width is dynamic.
Here's the basic codepen:
https://codepen.io/Ma-Kas/pen/dyLeYVe
Here the kind of intended behaviour with positon:fixed (minus the obvious ugly scroll overflow):
https://codepen.io/Ma-Kas/pen/BaExome8 replies