How to fix height automatically on embeded broswer page

Hi,

I want to embed a JSP application in vaadin. But I didn't find a way to make Embedded component fit the height automatically for embeded application.
Is it possible to fix height automatically on embeded broswer page?

My poor code:（The height of embeded page always 100px, I wish the height can be fixed automatically for the embeded content.）

VerticalLayout layout = new VerticalLayout();
final Embedded browser = new Embedded("", new ExternalResource("https://vaadin.com/home"));
browser.setType(Embedded.TYPE_BROWSER);
browser.setWidth("100%");
browser.setHeight("100%");
browser.setSizeFull();
layout.addComponent(browser);

Thanks

Hi,

First of all, it appears that

browser.setWidth("100%");
browser.setHeight("100%");

and

browser.setSizeFull();

are exactly the same.

For your problem, it seems that Embedded in mode Browser used HTML balise <Iframe>, so as far as I know, there is no way for the content to force the size of the iframe. I'm afraid the content has to fit to the dimension given by the Iframe.

Thanks for Oliv's reply.

In JSP I can use Javascript to adjust the iframe height after the content loading to make it work. But in vaadin I don't know how to code in JS. I will keep researching how to integrate with JS. Thanks again.

Hi coral,

Try to add a fixed size to the VerticalLayout you are using to put your browser, it could help, anyway add "?debug" to your application URL and press into Analize Layouts, if there is any problem with the sizes, the debug window will show you those problems and you can fix it, if there are problems of course.

HTH.

Javi

Hi,

You should also try to set the layout object's height to 100%. And if it is a window, you should use setLayout(layout).

VerticalLayout verticalLayout = new VerticalLayout();
		verticalLayout.setWidth("100%");
		verticalLayout.setHeight("100%");
		setLayout(verticalLayout);
		
		Resource file = new ThemeResource("html/"+htmlSource);
		embedded = new Embedded();
		embedded.setSource(file);
		embedded.setType(Embedded.TYPE_BROWSER);
		embedded.setSizeFull();

Regards

Aykut

Hi,

I had a similar issue which I finally solved by adding also on the embedded component an extra stretch in the verticalLayout

verticalLayout.setExpandRatio(embedded 1.0f);

kind regards,

Bert

Hi,

It turns out that the google analytics plugin has a negative side effect on the size calculations of the iframe's.

If I activate my google analytics then the embedded iframes reduce drastically in size.
If it is deactivated then they stretch as expected.

if (!state.googleAnalyticsID.equals("")) {
GoogleAnalyticsTracker tracker = new GoogleAnalyticsTracker(state.googleAnalyticsID, state.googleAnalyticsDomain);
mainWindow.addComponent(tracker);
tracker.trackPageview(myapp);
};

Bert