Centering Colorpicker window

Vaadin 6 / 7 / 8
1

Hello there,

First of all, I would like to thank the Vaadin team for such a nice work.

My question is how can I center the ColorPicker dialog on the website?
Everytime I click on the widget that opens the dialog, the popup is located at the top-left corner of the website.

Thanks in advance,
Regards

2

Well, ColorPicker doesn’t have a center() method like Window has, but it has setPosition(). You can get the browser window size from the Page or WebBrowser and use that to center the popup.

So, you could do something like:

picker.setPosition(
    Page.getCurrent().getBrowserWindowWidth() / 2 - 246/2,
    Page.getCurrent().getBrowserWindowHeight() / 2 - 507/2);

The exact size of the popup probably depends on the theme, but Firebug should help you there.


Edit:
 Removed a misleading paragraph from the end.

3

Dear Marko,

Thank you for your fast reply. It is really helpful. I have only one remaining concern.

I invoke the ColorPicker automatically by just creating a ColorPickerArea:


ColorPickerArea cp = new ColorPickerArea("Title");

So when I click on it, the picker pops up. But from the code perspective, I have no access to the picker itself. Do you know how to access it so I can apply your previous solution?

Thank you in advance,
Regards

EDIT: The following works but I do not understand why setPosition is applied to the picker dialog. Semantically speaking, I expected that this method changes the position of the ColorPickerArea itself rather than the dialog, i.e., I expected to obtain the same behaviour that the last line of the code (so positioning cp itself rather than the dialog) :


		ColorPickerArea cp = new ColorPickerArea("Title");
		cp.setPosition(
			    Page.getCurrent().getBrowserWindowWidth() / 2 - 246/2,
			    Page.getCurrent().getBrowserWindowHeight() / 2 - 507/2);
		cp.setWidth("600px");
		cp.setHeight("400px");
		layout.addComponent(cp, "left: 0px; top: 0px;")

However it works with your approach. I will marked as answered. Thank you again and if you can please also provide some insights about the setPosition method (for instance, what happens if I call setPosition on a widget that does not trigger a pop up? What is positioning the setPosition method there?
Thanks!

4

Yes, the setPosition() is the position of the picker dialog, not the position of the button/area used to open it. The button/area is just a regular Vaadin component, which you can position with Vaadin layout components, as you have done with the AbsoluteLayout in your code.

Using the setPosition() as described has a problem with resizing the browser window - as the center position is calculated when the button is created, the coordinates won’t change if the browser window is resized later.

The ColorPicker component definitely needs a better API for aligning the popup.

Looks like I made some wrong assumptions about the ColorPickerArea in my previous post (I had not looked at it more closedly so I assumed it to be the picker). There probably is need for an “InlineColorPicker” (compare with InlineDateField).

5

Thank you Marko for this valuable information.
I do agree with the “InlineColorPicker”, but from now on, I think I will use your “temporal” solution even if there are some problems when resizing the browser.

Thank you again and keep the good work! :slight_smile: