Align Vertical Timeline to one side without compact

[kuatroka]

Hi, I don't want to compact my timeline, I just want it not in the middle of the encompassing element but aligned the left, but I can't seem to make it.
justify-items-start or justify-self-start doesn't work. Any help would be appreciated.

Timeline

[saadeghi]

It's supposed to be in the center, otherwise if the width was elastic to the content, there would be no way to align the line to the center.

There's a way to set a fixed width to the left column by adding [--timeline-col-start:4rem] class:
https://play.tailwindcss.com/dNTRB3UT2C

Let me know if you have a question.

[kuatroka]

Thanks @saadeghi . I guess this workaround will do for now, but please check out these two links with the left, centre and right aligned Timeline components. I meant something like that out of the box. Basically, to let the designer decide which one they want. Thanks

mui

flowbite

[saadeghi]

As far as I can see, flowbite's example are similar to daisyUI's timeline-compact which all items align to one side.

And on MUI, it's not really an alignment, If you see the code, it's just applying a 20% width to one side (which you can do it on daisyUI using --timeline-col-start CSS variable as I mentioned)

[kuatroka]

Brilliant. Thanks
I tried to play with the compact version and to make all the sub list components to appear on the same line, but it all got messed up. As you suggested: [--timeline-col-start:4rem] works perfectly

[GodBleak]

I think it might be worth adding this to the docs, as I've been trying to hack together a solution for a few days before I found this. I also just noticed that GitHub uses the exact layout I was trying to accomplish with the Timeline, for these discussion threads. Just as a real-world example of where the timeline makes perfect sense, but center alignment of it, not so much.