Timeline + Groups - Two cases of severe rendering issues

[Rikk]

Using Timeline with Groups and stack=true (default).

1)

This issue took me a long time to figure out the cause...

Severe rendering issues happen when we define white-space: normal for the class .vis-item-content and no fixed-width is defined.

Basically, vis.js fails to calculate positions properly.

I made a modified version of the Groups demo:
http://jsbin.com/remukoqede/edit?html,output

Tip: because the demo creates random elements, some times (page reloads) it will be more clearly visible than others.

2)

When trying to center group labels in their containers, my first approach was this:

.vis-labelset > .vis-label {
    display: table;
}
.vis-labelset > .vis-label > .vis-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

But this also was causing positioning issues for vis.js.
The workaround I found is using flexbox, despite its compatibility:

.vis-labelset > .vis-label {
    display: flex;
    justify-content: center;
    align-items: center;
}

1+2)

In the configuration I'm building for a project I was getting an infinite amount of WARNING: infinite loop in redraw? and vis.js basically couldn't resize each group. You can see that it resizes pixel by pixel when timeline is being dragged in any direction.

http://jsbin.com/payugiyeyo/edit?html,output

[mojoaxel]

@Rikk Thanks for reporting this! This looks like a bug. I'll hope somebody finds the time to look into it.

[mojoaxel]

Issue 1:

this is a bug. If BoxItems get initially rendered of the screen and the content-width is dynamic (word-wrap, no fixed width) than the box width is determined falsely. I fixed this by rendering all boxes initially in the visible range so, the width can be determined correctly. See Pull-Request #2035

Issue 2:

This is the easiest solution:

.vis-labelset .vis-label .vis-inner {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

infinite loop:

see #450

[Rikk]

@mojoaxel Thanks very much for the prompt answer and fix!

Could you build a minified js please? Or, do you know when a new version will be released (last was April)? (No need to rush, for me it is ok to use fixed width).

About the loop, I just did a brief reading of the pointed issue, not sure it is related, as the cause here is not adding elements...

About your solution for alignment of group labels, it only centers horizontally but not vertically. My idea was both horizontal+vertical, it would need vertical-align property like the sample I gave. But the flexbox solution is ok for my needs atm. The first solution (display: table-cell) also causes the loop and is visible on my second demo, and still happens with the fix for dynamic width. Try doing some zoom-in/out with mouse wheel.

[mojoaxel]

Could you build a minified js please?

You can do this easily yourself:

git clone git@github.com:almende/vis.git
cd vis
git checkout develop
npm install
npm run build

Than you find the current develop version in the dist folder.

About the loop, I just did a brief reading of the pointed issue, not sure it is related, as the cause here is not adding elements

Feel free to create a new issue for that.

About your solution for alignment of group labels, it only centers horizontally but not vertically.

Yeah, I did not read it carefully enough, sorry. You could create a new Feature-Request issue for horizontal/vertical alignment of the group-labels.

[Rikk]

First, I don't use these modern JS-based package managers so I can't build it myself.

Than you find the current develop version in the dist folder.

Neither the main repo or the dist folder were updated with this fix. I see it only in a commit in your own fork.

Second, this issue presents 2 bugs, I can't see a reason to create a new issue just to split out one of them.

Last, the thing that would really help me is #1699

[mojoaxel]

I see it only in a commit in your own fork.

The fix is now in the develop branch, but I cannot say when the next version will be released.

I can't see a reason to create a new issue just to split out one of them.

One "issue" should only contain one issue, so that it could be handled separately.
Vertical label alignment is not an bug but maybe a missing feature. So it should be handled separately as a "feature-request".

Last, the thing that would really help me is #1699

I see no chance that that gets implemented at the moment. We are trying to keep the project running. New complicated features are not our main goal ;-)
Maybe you know someone to finance the development of new features? 💰

[Rikk]

Maybe you know someone to finance the development of new features? 💰

Maybe a donation link somewhere could help? (Paypal)

[mojoaxel]

Maybe a donation link somewhere could help? (Paypal)

Good idea. I'll discuss it with the maintainer. I hope we'll find a way for the future.