Vuetify: [Feature Request] Add alignment options to v-timeline

[timoschwarzer]

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 https://github.com/vuetifyjs/vuetify/issues/6594#issuecomment-468389266

Proposed solution

I think this needs to be discussed as I don't have a good idea for this.

[nekosaur]

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 left or right prop in v-timeline-item

https://codepen.io/anon/pen/OqyBBB

[timoschwarzer]

Oh, thanks, you're right. I somehow missed these attributes.
Well, then I have to reword this issue. My intent is to resize the opposite slot to the minimum width. Currently it's fixed at 50% for the opposite slot and 50% for the actual content. I want all content on one side with the maximum width possible. :sweat_smile:

Edit: Example:

I haven't found a way to accomplish this with the current framework options.

[yashdhume]

try putting the whole timeline in a container
<v-container fluid> <v-timeline> . . . </v-timeline> </v-container>

[ReneS1991]

Hi,

I'd like to upvote this request as I'd like to achieve the following:

Currently I am overwriting the Vuetify CSS (mainly with some !importants 😞). Would be very nice if there is a build-in fix for this 😄

PS: I tried the fluid container but that doesn't make any difference.

[gza-slc]

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.

[gjovanov]

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>

[nwaughachukwuma]

It doesn't work for me @gjovanov. I mean when trying to display opposite slot.

[vitaliy-ostapchuk93]

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.

[twilliams0001]

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?

[sw34]

the following is working for me on vuetify 2.2.x

.v-timeline--dense .v-timeline-item__opposite {
  display: inline-block;
}

.v-timeline-item__opposite {
  flex: none;
}

/* line */
.v-application--is-ltr .v-timeline--dense:not(.v-timeline--reverse):before {
  left: 143px;
}

.opposite-width-force {
  display: inline-block;
  width: 95px;
  text-align: right;
}

[twilliams0001]

Thanks @sw34, this does the trick. I appreciate the help!

[aktentasche]

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.

:root {
  --timeline-opposite-item-width: 160px;
  --timeline-line-width: 8px;
}

.v-timeline--dense .v-timeline-item__opposite {
  display: inline-block;
}

.v-timeline-item__opposite {
  flex: none;
  min-width: var(--timeline-opposite-item-width);
}

/* line: divider in the middle is 96px wide by default */
.v-application--is-ltr .v-timeline--dense:not(.v-timeline--reverse):before {
  left: calc(
    var(--timeline-opposite-item-width) + 
    (96px - var(--timeline-line-width)) / 2
  );
  width: var(--timeline-line-width);
}