Box

Flow
1

Hello,
Which is the best component to use to achieve layout as shown in the figure using vaadin. I need to get a popup window above the setpriority button without overlapping it when clicking on set priority button.
The popup box contains 2 button and 4 texts.
image.png

2

You can, for example, use a FormLayout and add the components you want to it, then react on the user input to either set it visible or don’t show it. You can always add other Layouts like the FormLayout as a component to your mainlayout. That’s how I would do it

3

Or, if this should open on ButtonClick, take a look into the Menu Bar Component. This offers the feature of Menu Items, which look like this when clicked:
image.png
image.png

4

I would definitely go for a MenuBar, or a Button that opens a ContextMenu.

They’ll open downwards by default, but will open upwards if there is insufficient space in the viewport below the button.

5

I tried with context menu and it was opening upwards but was overlapping the button. I was not able to move that context menu

6

I tried dialog box too, it was coming in the center and was not able to style it like the image that I have attached

7

I am using dialog to achieve the popup window. But I am not able to set custom width and height as it is adding scrollbar to the dialog box.
Is there way to add custom dtyle to dialog box ?

8

@useful-whale
I am not able add any custom style to the dialog box. Guess something is overriding it. From console, I am able to style it but via code ,it is not taking any style.
Is there is something I am missing.
Thanks for the help.
image.png

9

what kind of styling are you trying to apply to it?

10

and what Vaadin version are you on?

11

Hi,
I was trying to add custom style to dialog box. Now this issue is fixed. The layout is now created without using dialog.