I have implemented this popup linked to a button with a clicklistner. The p

Directory Popup
1

I have implemented this popup linked to a button with a clicklistner. The popup shows up correctly, but in the top left corner and I receive a " Cannot read property ‘getBoundingClientRect’ of null" error. How do I fix the error and align the popup to be in the center of the page?

2

You do not need click listener in the Popup, just link the Popup to button this way and popup will automatically opened when button is clicked. The popup itself needs to be added to layout also

Div popupContent = createPopupContent(); // ToDo
Button popButton = new Button("Popup");
popButton.setId("columnsbutton");
popup = new Popup();
popup.setFor("columnsbutton");
layout.add(popButton, popup);
popup.add(popupContent);

Note also, the Popup is part of the Vaadin Component Factory collection, you need valid subscription in order to use them.

3

Thanks Tatu, your solution worked! I am still trying out Vaadin. Are the Vaadin Component Factory collection components available on the Prime package?

4

Are the Vaadin Component Factory collection components available on the Prime package?

Yes, this is the current state of affairs.

5

Update: Most of the Vaadin Component Factory components are now being open-sourced and made available free-of-cost.

See the company blog post, [Prime subscription price lowered, component factory components open sourced]
(https://vaadin.com/blog/prime-subscription-price-lowered-component-factory-components-open-sourced)

6

Yes, we will change the license type of these components, including Popup, it is a rolling process. Please be patient.