Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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