Demo a little off

Question

Demo a little off

Opened this issue 2 years ago · 9 comments

Answer 1 · 2022-10-16T10:55:42.000Z

Oh, let me check

Answer 2 · 2022-10-17T21:09:29.000Z

So, I think this is an issue with Chart.js. I opened a bug on their project. All the other graphs are ok except for the line graph.

Answer 3 · 2022-10-19T15:43:05.000Z

@erossini I guess your last changes within Chart.razor was about this problem? However it led only to bigger problems.

I use firefox and before when running demo I had big gap under the chart. Now, after this change I have chart overlapping the code, but in my own app the chart resizes on entire screen.

Locally I can remove those changes, but I would say until there is really rock solid solution to remove those changes from your code as well (i.e. officially so to speak).

Answer 4 · 2022-10-19T15:47:13.000Z

I'm not sure this problem is something related to Chart.razor because if you open the HTML, you can see the height of the chart-container is rewritten for the canvas by Chart.js but only when you ask for a line chart.

I don't know if you have the same problem or not.

Answer 5 · 2022-10-19T16:02:37.000Z

I am using scatter plot in my app.

As for my app I found the culprit -- in your last changes you added css class with display: inline-block. This is causing chart to go over entire screen.

I would say this and setting width to 100% would be better removed. Let user decide via Class property, it is fully customizable after all.

Answer 6 · 2022-10-19T16:07:16.000Z

But this happens only with the line graph. For example, with Firefox

the line graph is all over the place, but other graphs are ok.

Answer 7 · 2022-10-19T16:15:49.000Z

I removed the display in the CSS

Answer 8 · 2022-10-19T16:31:59.000Z

Yes, the demo looks off, but I don't know why (so far). My point was that fix should of course improve the demo, but behave predictably in other apps as well.

Answer 9 · 2022-10-19T17:58:37.000Z

PS: I added few new graphs