Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

timeline: fix vis-item-content width #1853

Closed
wants to merge 1 commit into from
Closed

timeline: fix vis-item-content width #1853

wants to merge 1 commit into from

Conversation

raphink
Copy link
Contributor

@raphink raphink commented May 14, 2016

In order to place content in bars, timeline pushes vis-item-content to the right with things like:

<div class="vis-item-content" style="left: 564.664px;"

When using large content, this leads to the content overflowing the div:

screenshot from 2016-05-14 15-27-10

By adjusting the width, this can be fixed:

<div class="vis-item-content" style="left: 564.664px;width: calc(100% - 564.664px);"

screenshot from 2016-05-14 15-37-10

@raphink
Copy link
Contributor Author

raphink commented May 14, 2016

I attached code to this issue, which fixes it in the most common case (align = auto, rtl = false)

raphink added a commit to raphink/CV that referenced this pull request May 14, 2016
@raphink raphink changed the title timeline: set width of bar timeline: fix vis-item-content width May 14, 2016
@AlexDM0
Copy link
Contributor

AlexDM0 commented May 18, 2016

Hi, is this supported in all browsers? What happens if it's not?

Thanks for helping out!

@AlexDM0
Copy link
Contributor

AlexDM0 commented May 18, 2016

On a side note, we can only accept pulls to the dev branch. Could you resubmit it?

@raphink
Copy link
Contributor Author

raphink commented May 18, 2016

I haven't had issues with the browsers I tried.

I'm using this on http://raphink.info if you want to test.

I can definitely resubmit against the dev branch if necessary.

@AlexDM0
Copy link
Contributor

AlexDM0 commented May 19, 2016

It looks a little broken on a phone actually.. 100% is not that much there

@raphink
Copy link
Contributor Author

raphink commented May 19, 2016

@AlexDM0 oh? What phone are you using?

@AlexDM0
Copy link
Contributor

AlexDM0 commented May 19, 2016

@raphink
Copy link
Contributor Author

raphink commented May 19, 2016

Ah, you mean the bars on the right. They've very small indeed. You can get info if you zoom on them (not sure if pinching works on iPhone though, it doesn't work on iPad). I don't know how to improve that. Maybe a zooming button on bars?

@AlexDM0
Copy link
Contributor

AlexDM0 commented May 19, 2016

I'm not sure I want to head in that direction... For your usecase it might
work but I'm not gonna add it to vis.. It's a bit unpredictable.

Regards

On Thu, May 19, 2016 at 11:03 AM, Raphaël Pinson notifications@github.com
wrote:

Ah, you mean the bars on the right. They've very small indeed. You can get
info if you zoom on them (not sure if pinching works on iPhone though, it
doesn't work on iPad). I don't know how to improve that. Maybe a zooming
button on bars?


You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#1853 (comment)

@AlexDM0 AlexDM0 closed this May 19, 2016
@raphink
Copy link
Contributor Author

raphink commented May 19, 2016

@AlexDM0 I'm not sure to understand your point. The screenshot you took would look exactly the same without the patch (because I've set end dates to be now). The difference is when you click on a bar, as there is a lot of content that is shown then, and would be hidden after the red vertical bar without the patch.

@AlexDM0
Copy link
Contributor

AlexDM0 commented May 19, 2016

I see now, sorry, I was under the impression that you were modifying the outer div.

If you can redo a pull to the develop branch I'll add it since I cant accept a pull to the master branch.

AlexDM0 added a commit that referenced this pull request May 19, 2016
Set content width to avoid overflow (Fix #1853)
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants