New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature Request] Add alignment options to v-timeline #6594
Comments
Your title says that dense timelines should display opposite slot, but reading the text it sounds like you simply want to align all items to one side or another. This is already possible. Use |
Oh, thanks, you're right. I somehow missed these attributes. I haven't found a way to accomplish this with the current framework options. |
try putting the whole timeline in a container |
Upvoting too. Basically the same issue as @ReneS1991, I would like to reduce the width of the left column and increase the width of the right one. |
You can achieve this with some custom CSS e.g. to reduce from 96px to 64px, you can use this: <style>
.v-timeline-item__divider {
min-width: 64px;
}
.v-timeline--dense .v-timeline-item__body {
max-width: calc(100% - 64px);
}
.v-application--is-ltr .v-timeline--dense:not(.v-timeline--reverse):before {
left: calc(32px - 1px)
}
</style> |
It doesn't work for me @gjovanov. I mean when trying to display opposite slot. |
Have similar issues on mobile devices using the timeline. Dense will cause an overflow and the item decider will behave strange if there is no enough space. |
Same issue here. Need to provide text in the opposite slot with dense enabled. Until this option is available, does anyone have working CSS to accomplish it? |
the following is working for me on vuetify 2.2.x
|
Thanks @sw34, this does the trick. I appreciate the help! |
I took the CSS from @sw34 and modified it, so one can just write the desired width of the opposite item. I removed the opposite-width-force section as it had no effect for me. Also, one can adjust the line width of the line in the middle. Maybe this helps someone.
|
Try to use the |
Problem to solve
With the current framework options there's (as far as I know) no way to alter the 50%/50% split between the content and the
opposite
slot.See #6594 (comment)
Proposed solution
I think this needs to be discussed as I don't have a good idea for this.
The text was updated successfully, but these errors were encountered: