Question

We have a Java servlet that generates a report. Now we included an option to generate a highcharts diagram, containing N highcharts graphs. The diagram should open on a modal element (lightbox, iframe, it doesn’t matter). I used fancybox and displayed the diagram loading in a iframe, but the height and width are all messed up.

It seems that the browser/fancybox is/are calculating the size of the elements of diagram before highcharts renders, and displays the iframe with a small size.

I am not bound to using iframe, though the diagram is called from a servlet URL and it is impossible to know its size beforehand.

I can use another jquery library if that’s the case.

using fancybox 2.0.5, jquery 1.7.2, highcharts 2.2.5

Answer 1

I solved the issue, by changing the highcharts HTML containers from floating divs to a table structure and changing the fancybox mode from iframe to ajax.

This way fancybox could read the correct size.

Fancybox was the only one jquery plugin (i tested jqmodal and simplemodal too) I was able to make correctly trigger from the links. The links are dynamically loaded by an ajax call on the page, AFTER the page has loaded.

This is the code on the $(document).ready( call

$("a.modalLightbox").fancybox({
type : 'ajax'
autoSize : true,
padding : 5,
fitToView : true,
});

The tables had their widths set via inline CSS (not the best, but it had to be done inline since each diagram has its own width calculated by the servlet).

The all-floats approach were leaving the body element of the iframe with 0 height and inherited width.