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

CodePenAvinash-Tallapaneni

MWPyvQe

...

AvinashOP•4/26/23, 4:25 AM

AvinashOP•4/26/23, 4:29 AM

if i give margin-top:15rem its fitting inside green box. is there any othe rway to fix this?

Monimolimnion•4/26/23, 6:56 AM

it would help if the codepen was actually useful

AvinashOP•4/26/23, 7:26 AM

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

CodePenAvinash-Tallapaneni

MWPyvQe

...

Kevin Powell•4/26/23, 11:30 AM

The issue with rotating something (I'm assuming you used transform: rotate()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-lrwriting-mode: sideways-lr, but sideways is only supported by Firefox sadly, so instead you could use writing-mode: vertical-lrwriting-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><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?

AvinashOP•4/26/23, 2:20 PM

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

Monimolimnion•4/26/23, 2:49 PM

probably easiest to have a separately positioned rotated title and just show it on collapse

AvinashOP•4/26/23, 3:47 PM

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

AAvinash yeah that was my first resort, the issue is when i zoomed in or out, its was off...

Kevin Powell•4/26/23, 4:56 PM

Ah, I get it now. Yeah, position: absoluteposition: absolute, rotate, and then get it where it needs to be

Still wouldn't use an inputinput there though