At the moment I'm have a resizing issue with highcharts.
Initially the legend shows correctly, but when the user resizes the screen (to a smaller size) some of the legend items become invisible (although they are still there).
I've made a JS fiddle of the problem: here.
The following seems to be invisible (but there is no differance betweet the legend elements
<g class="highcharts-legend-item" zIndex="1" transform="translate(263,3)">
I can only recreate this on Firefox, (works correctly on IE, haven't tested Chrome).
Related
My application is using a com.vaadin.flow.component.applayout.AppLayout with a header and a drawer (a standard layout inspired by misc. example programs). The lower right content part is populated with VerticalLayouts that have a #Route(value="foobar", layout = MainLayout.class) annotation, so when clicking on one of the "anchors" in the drawer the corresponding view is added.
That works all nice except for one thing that annoys me:
One of my views has four Accordion components (2 containing a couple of labels and a TextArea each, one containing some textfields and a chart. The forth contains some text fields and a button).
When I unfold these accordions then typically when expanding the third or fourth there is suddenly a second vertical scrollbar appearing just inside the outer, normal scrollbar. Already two opened accordions are higher than what fits a typical browser window, but here the size and the scrollbar is adjusted correctly. Sometimes, but strange enough not always, the scrollbar also adjusts properly with three opened accordions. Sometimes already with the 3rd, but definitely always with the 4th accordion that second scrollbar appears. The combination of opened accordions does not seem to play a role, i.e. there is no accordion that ALWAYS triggers that scrollbar appearing.
I find this second scrollbar most irritating and annoying when navigating the page. Any idea what could cause this? And how to force a single scrollbar only?
BTW: I experimented with wrapping the entire content inside a Div but that didn't change anything - the second scrollbar still appears as described above.
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());
I have a vaadin layout that works fine on a larger screen. As soon as the screen size (and the resolution) drop, all the contents get cut off and no scrollbar appears.
I tried using a Panel to remedy the issue, but the panel likewise gets cut off.
Panel panel = new Panel();
panel.setContent(horizontalSplit);
panel.setSizeFull();
panel.getContent().setSizeUndefined();
I also tried using
Responsive.makeResponsive(horizontalSplit)
but it still cuts off
Any suggestions?
If you set
panel.setSizeFull();
and
panel.getContent().setSizeUndefined();
then it is normally to content be cutt of on small screens.
Solution is to setSizeFull() on panel content too.
Add the following style in your styles.scss file
.overflow-auto{
overflow : auto;
}
Then set StyleName to your panel
panel.setStyleName("overflow-auto");
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.
Please see http://jsfiddle.net/6XVNr/2/ for a (not very sexy) example of the issue I'm having.
I wish to resize an iframe element which has been given the jQueryUI dialog treatment. The issue I have is that I'm not sure which element I should resize.. I can resize the id of the iframe which was targeted for the .dialog() function, or I can resize the resulting ui-dialog class, which wraps around the iframe.
Resizing the iframe element only affects the height of the dialog, the width is simply hidden by the dialog. Resizing the ui-dialog class almost works perfectly.. the size is fine, but the buttonpane is not sticking to the bottom of the dialog. Which is the correct method and how can I get it fully working?
Please ignore the colours, the scrollbars, the fact it's not centred after resizing etc.. I stripped everything out for the example - also tested with a div instead of iframe and got the same results.
Thanks :)
Well it suddenly occurred to me - why not alter the height by resizing the iframe element, and the width by resizing the ui-dialog class.. seems to work ok so far :)