I am using angular 8, Highcharts and angular-gridster2 to drag-select-resize grid. When I am resizing a widget, the child components (in my case Highcharts chart) does not resize until after the user resizes the screen (browser window). I added all possible options to the Highcharts options to get it, resize with the (external) window resize. Is there something I am missing, what should I use to fix the issue?
Thank
Related
I have an ag-grid-react set up with a series of components in place for cell rendering. When my dataset loads the vertical scroll works well but the horizontal scroll isn't obvious unless using a trackpad or horizontal scroll enabled mouse.
I would like to be able to add a scroll bar to the top of the grid as well as the automatically generated one at the bottom?
Has anyone encountered this, come up with as solution?
Thanks in advance.
Note : I found this solution How to add a horizontal scrollbar on top of the ag-grid but seems this is old and not working.
I created my form and it looks fine in the standard size when ran with the program, however when I maximize the form, the components get messed up. I anchored the components on the left and right, however a giant gap is created in the middle of the form and I don't know how to fix it. When in the 'Design' view of the program, all my components are touching from me trying to fill the middle gap. I tried aligning, anchoring and searched online for a while with no luck. Any clue?
Form in standard size upon running program:
Form in full screen with giant middle gap:
From the form's OnResize event, you can compute the width and left property values for the component to fit the new size. You can adjust the width of components or distribute the distance between components to get the look you want. Or a combination of the two.
It is also possible to put the components on two lines if the form's width becomes too small. Or use a scroll panel so that the user can scroll to see what is not possible to show correctly given the width.
All that requires coding. Parts can be done using panels and align the panels.
In Vaadin 14.6.1, I have created a horizontal layout with 2 charts (and some other stuff). The charts are not using up the correct width -- they seem to not "pick up" on the right width (see screenshot below). I set the width to 100% etc. Also, this problem disappears if I use a simpler component, such as label, instead of charts (from Highcharts). I've experienced a similar problem before, but in more complex settings (e.g. a user adjusts the splitlayout and the underlying chart does not resize). But in this case, it's an even more reasonably straightforward scenario (i.e. no adjustment by user of the width of any layout) and yet Vaadin doesn't seem to pick up the right width, at least when using charts. Is this a known or reproducible issue? If so, any workaround?
Charts indeed behave badly with some layouts. I have noticed two cases. The other is the Board component, where the workaround is just simply wrap Chart inside Div, i.e.
Div div = new Div();
div.add(chart);
// and then add div to Board
SplitLayout is more tricky. You need to call Chart to reflow after splitter has been moved. Something like the following finds all the charts and forces them to redraw.
splitLayout.addSplitterDragendListener(event -> {
getUI().ifPresent(ui -> ui.getPage().executeJs(
"Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"));
});
Note, if you have only one chart or have conveniently the references to chart instances you can do
chart.getElement().executeJs("$0.__reflow();", chart.getElement());
When Im making browser's window smaller. I cant see all objects also there is no vertical and horizontal scroolbars. Can u guys share information with me how I can fix it.
Also there is no scroolbars, when my layout is out of screen resolution.
How I can add scroolbars by default when my layout out of screen resolution
I have four HighCharts on a page, stacked vertically. In each of these charts I have buttons that change the data range and re-load the chart.
This works fine for the top two, but when the chart re-loads on the bottom two it moves the screen up the page, always to the same point.
With some testing I found that it doesn't matter what order the charts are in, and also if you click the button on the top form and scroll down the page, it moves the page back up to the same position.
It's like HighCharts has a lower limit on where the page an be and always moves it back to this position when a chart is loaded.
I can't find any settings within HighCharts or anything on Google that will sort this.
I thank you all in advance for your help
Paul
It's because chart container height for a moment gets smaller on chart reload. You can fix this by setting fixed container height.