issues with collapsing a container.
im trying to collapse the container so that all child div except title is displayed none and the first div(title) is roatated by -90deg. im facing issues where the child div is rotated but its not placed properly, i tried using flexbox properties but to no avail.
i cleaned up somecode. few icons are missing, dont know how to import icons in codepen
https://codepen.io/avinash-tallapaneni/pen/MWPyvQe
9 Replies
if i give margin-top:15rem its fitting inside green box. is there any othe rway to fix this?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
i updated the codepen. https://codepen.io/avinash-tallapaneni/pen/MWPyvQe
i reduced it cause of the content. dont know if i can fit all the lines of code in here
The issue with rotating something (I'm assuming you used
transform: rotate()), is that the other elements around it don't "see" that change, so positioning it become a little tricky.
Ideally, we could use writing-mode: sideways-lr, but sideways is only supported by Firefox sadly, so instead you could use writing-mode: vertical-lr and then do a transform to rotate it 180deg. I did a quick example here: https://codepen.io/kevinpowell/pen/jOemYzL/7cd65f27af189e5cd0697c4cf0dfc5b5
The one thing is, that won't work with an <input> like you've used for your "title", but an input can't be a title... Is there a reason you are using an input right now?https://prium.github.io/phoenix/v1.11.0/apps/kanban/kanban.html#! im trying to replicate something like this. when collapsed only title is visible, rest i kept display none
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
yeah that was my first resort, the issue is when i zoomed in or out, its was off, so i had to hard code pixel value and % to align it center and attach to the top
Ah, I get it now. Yeah,
position: absolute, rotate, and then get it where it needs to be
Still wouldn't use an input there though 😄