Adding HTML from Javascript

Flow
1

Hi,

I’m trying to add a

text

tag to a HorizontalLayout from Javascript. The DOM inspector says that the

text

has been added to the page. But it’s not seen anywhere in the HorizontalLayout. Is it normal?

Regards.

2

Probably because the size of the layout is counted based on the content in a specific px size. When you add your code not through Vaadin but through your own JS, then the size of the layout will not be recalculated and the content is outside the layout, hidden with overflow: hidden;

May I ask why you are modifying the DOM directly with JS? Vaadin is not really suitable for doing that. Would layout.addComponent(new Label(“

text

”,Label.CONTENT_XHTML)); be a working alternative for you?

3

The

is just an example. Actually, I want to add an OpenLayers map to the page without using the OpenLayers add-on. Is there a way to recalculate the layout size with JS?

4

Calling vaadin.forceLayout() from JavaScript might work.

5

Calling vaadin.forceLayout() after creating and setting up the map hasn’t made any changes. Does the place of forceLayout() in the code matter?

6

I found a solution to my problem. I’m going to use an iframe in order to display my OpenLayers application completely developped in Javascript/Html. I hope there will be no problem with that : conflicts with vaadin components, … What do you think?


URL url = new URL("http://.../");
			Embedded browser = new Embedded(null, new ExternalResource(url));
			browser.setType(Embedded.TYPE_BROWSER);
			contentLayout.addComponent(browser);
7

The iframe is quite isolated from the Vaadin application and therefore should be safe if the limited interaction possibilities on the client side are not an issue in your application.

For why forceLayout() did not work: the might (not sure) have been because the layout in which you added the JavaScript div only considered the sizes of Vaadin components in it, not other elements. CssLayout might also work better than other layouts in such situations, but the iframe solution should work and provides more isolation also for CSS etc.

8

Ok thank you Henri.
I used CssLayout and it worked for the

. I’m now able to add and display a

element from Javascript. But for the OpenLayers map it doesn’t work!