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

Overflow ellipsis not working if height is too high #5339

Closed
pawamoy opened this Issue May 25, 2016 · 6 comments

Comments

Projects
None yet
2 participants
@pawamoy

pawamoy commented May 25, 2016

Expected behaviour

Long categories names should be truncated with '...' added at the end. This should be done by default since one of the latest version. Trying to reproduce this on a jsfiddle it seems that the bug occurs when the chart height is too high. On this particular example at least, the bug occurs when the height is over 641.

Actual behaviour

No ellipsis is appended and the full text is displayed, pushing the chart outside the valid width and therefore not displaying it.

Live demo with steps to reproduce

https://jsfiddle.net/Pawamoy/zvxpad0c/

Affected browser(s)

Firefox, I did not try on others

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi May 26, 2016

Collaborator

Thanks for reporting! The overlow also depends on the width of the chart. I tried different widths ranging from 400px to 800px, but could not see the problem. Can you set a fixed width that reliably reproduces the problem?

Collaborator

TorsteinHonsi commented May 26, 2016

Thanks for reporting! The overlow also depends on the width of the chart. I tried different widths ranging from 400px to 800px, but could not see the problem. Can you set a fixed width that reliably reproduces the problem?

@pawamoy

This comment has been minimized.

Show comment
Hide comment
@pawamoy

pawamoy May 26, 2016

Indeed I tried with different fixed width and here are the working width/height combinations:

  • height < 642
  • 642 <= height <= 662 and width < 277
  • 663 <= height <= 683 and width < 177
  • 684 <= height <= 704 and width < 142

I tried on different screen resolutions, and nothing changes. I also tried to resize the part where the chart is drawn in JSFiddle but again, nothing changes.

It seems that is also depends on the number of elements in the series data: removing the 10 extra items (25 categories, previously 35 items), now I have these working combinations:

  • height < 503 and width < 277
  • 503 <= height <= 523 and width < 177
  • 524 <= height <= 544 and width < 142

It really gets confusing hahaha 💫 💥 👊 💀

Just so you know, here is a screenshot of what I get:
capture du 2016-05-26 11-31-30

(And a screenshot of what I should get)
capture du 2016-05-26 11-32-04

pawamoy commented May 26, 2016

Indeed I tried with different fixed width and here are the working width/height combinations:

  • height < 642
  • 642 <= height <= 662 and width < 277
  • 663 <= height <= 683 and width < 177
  • 684 <= height <= 704 and width < 142

I tried on different screen resolutions, and nothing changes. I also tried to resize the part where the chart is drawn in JSFiddle but again, nothing changes.

It seems that is also depends on the number of elements in the series data: removing the 10 extra items (25 categories, previously 35 items), now I have these working combinations:

  • height < 503 and width < 277
  • 503 <= height <= 523 and width < 177
  • 524 <= height <= 544 and width < 142

It really gets confusing hahaha 💫 💥 👊 💀

Just so you know, here is a screenshot of what I get:
capture du 2016-05-26 11-31-30

(And a screenshot of what I should get)
capture du 2016-05-26 11-32-04

@pawamoy

This comment has been minimized.

Show comment
Hide comment
@pawamoy

pawamoy May 26, 2016

I just tried on Google Chrome and I can reproduce the bug but with slightly different values:

  • height <= 300 and width <= 277: chart displayed but no truncating and no ellipsis for labels (I just see the end of the labels, the rest is cut, going out of the area on the left)
  • increasing height or width, then again chart is pushed outside of the area by the non-truncated labels

In summary:

  • sometimes labels are not truncated, and the chart is displayed but labels go out of the area on the left
  • sometimes labels are not truncated, and the chart goes out of the area on the right
  • sometimes everything works just fine 👍

Resizing the window can make the chart appear, but hitting again the "Run" button in JSFiddle will the bug to occur again.

pawamoy commented May 26, 2016

I just tried on Google Chrome and I can reproduce the bug but with slightly different values:

  • height <= 300 and width <= 277: chart displayed but no truncating and no ellipsis for labels (I just see the end of the labels, the rest is cut, going out of the area on the left)
  • increasing height or width, then again chart is pushed outside of the area by the non-truncated labels

In summary:

  • sometimes labels are not truncated, and the chart is displayed but labels go out of the area on the left
  • sometimes labels are not truncated, and the chart goes out of the area on the right
  • sometimes everything works just fine 👍

Resizing the window can make the chart appear, but hitting again the "Run" button in JSFiddle will the bug to occur again.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi May 27, 2016

Collaborator
Collaborator

TorsteinHonsi commented May 27, 2016

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi May 27, 2016

Collaborator

I fixed this for your case, but the issue may be deeper. It seems to be a general problem that ellipsis is not applied if the categories are high enough to allow two or more lines of text. In this case, when the text consists of one large word, we will neither get ellipsis or word wrap.

Collaborator

TorsteinHonsi commented May 27, 2016

I fixed this for your case, but the issue may be deeper. It seems to be a general problem that ellipsis is not applied if the categories are high enough to allow two or more lines of text. In this case, when the text consists of one large word, we will neither get ellipsis or word wrap.

@pawamoy

This comment has been minimized.

Show comment
Hide comment
@pawamoy

pawamoy May 27, 2016

Oh yes it reminds me of an issue I was having with large words, and actually I never solved it: in a HTML div, when text is too long, we can use CSS word-wrap, but then if the text is one large word, it doesn't work, so you have to use word-break, but then, normal text isn't wrapped anymore but broken, cutting words in the middle!! So you have to wrap/cut your text from the backend, but how do you know the width of the div in advance...

Anyway, thank you for your time and for solving this 💟

pawamoy commented May 27, 2016

Oh yes it reminds me of an issue I was having with large words, and actually I never solved it: in a HTML div, when text is too long, we can use CSS word-wrap, but then if the text is one large word, it doesn't work, so you have to use word-break, but then, normal text isn't wrapped anymore but broken, cutting words in the middle!! So you have to wrap/cut your text from the backend, but how do you know the width of the div in advance...

Anyway, thank you for your time and for solving this 💟

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment