Flow Dialog 'Top Title'

I would like to add a ‘top title’ to a modal dialog similar to what the flow login overlay does.

I can add a component easily enough. However, I cannot figure out how to make it fully the width of the dialog.

There is padding or margin or something that prevents that from happening.

Any help appreciated!

Hi, there was an example Grid shown in [This blogpost]
(https://vaadin.com/blog/vaadin-14.2-feature-update-is-in-beta). That grid has such a header, and more. The code for that Dialog implementation can be found [here]
(https://github.com/johannesh2/dialog-example-with-vaadin/blob/master/src/main/java/com/example/components/dialogs/MyDialog.java), and the related CSS is [here]

Generally, you can always inspect the element in your browser and change CSS values like padding and margin on the fly to find the exact CSS definitions that you need, then apply them in your code.

This exhibits the same issue I was having: the dialog title (header in the code) has white space around it as though there are margins or padding. Inspecting, I cannot see where that is coming from.

I may not be doing it right, but appreciate the lead and I will continue to work it.