Dialog resizable, no padding

Flow
1

Hello,
How it’s possible to do a flow dialog resizable and movable by user?
Also how can I remove the dialog padding?

Thank you

2

Paading

You can theme the padding away. Here’s an example

Theme

<dom-module id="custom-dialog" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
	  :host([theme~="custom-dialog"]
) [part="content"]
 {
	    padding:0;
  	  }
    </style>
  </template>
</dom-module>

HTML

<vaadin-dialog id="dialog" theme="custom-dialog">

You have to give a theme to your dialog. That’s how you do it in HTML. In Flow, I think it is dialog.addThemeVariants("custom-dialog");. Then inside your theme file, you have to create a new dom-module, It says theme the vaadin-dialog-overlay part, where the padding is, of each component with the theme attribute “custom-dialog”. Then it sets padding:0 to remove the extra space.

You can see a live example here: https://amber-pin.glitch.me/
The code is available here (HTML variant): https://glitch.com/edit/#!/amber-pin

Dragging & Resizing

Sadly, these features aren’t yet there in Vaadin 10+. In Vaadin 12 there is plans to add generic [drag & drop support]
(https://github.com/vaadin/flow/issues/3978) that could be used for the drag part. For Resize there isn’t really anything available yet. Let’s hope we get them soon.

3

I created a ticket to make a theme variant directly for this so that you don’t have to touch css to be able to achieve the no padding dialog: https://github.com/vaadin/vaadin-dialog/issues/126

4

Thank you Jens,
Your example work very fine with this modification!
For resize I will be patient.

Here’s custom-dlg.html



[part=“content”]
{
padding:0 !important;
}


@htmlimport(custom-dlg.html) …

5

Hi,

Dragging & Resizing

Sadly, these features aren’t yet there in Vaadin 10+. In Vaadin 12 there is plans to add generic [drag & drop support]
(https://github.com/vaadin/flow/issues/3978) that could be used for the drag part. For Resize there isn’t really anything available yet. Let’s hope we get them soon.

So true.
Vaadin 14 is out soon, and still no movable windows.
That makes Vaadin Flow unusable for real world applications.
The ‘mobile first’ idea is a nice try, but business apps are
still on desktops.

The drop of GridLayout is another show stopper. This is by far my
most used layout, because i can emulate any other thing with it.
And how else can i get proper aligned (horz. and vert.) input forms,
that have more than a handfull of controls?

There is a lot more, that keeps me away from using Vaadin Flow.

greetings
Ralf

6

Created a feature request for resizable dialogs: https://github.com/vaadin/vaadin-dialog-flow/issues/141