Remove header in Dialog

Support
1

I have a dialog opened by dialogWindows. I removed it’s header via the following path:
vaadin-dialog-overlay::part(header) {
display: none;
}

But this should work for only one, not all dialogs. Is it possible to change the css for the dialog by giving it an id?

2

You can set a CSS class name to the dialog window:

DialogWindow<DepartmentDetailView> dialogWindow = dialogWindows.detail(departmentsDataGrid)
        .withViewClass(DepartmentDetailView.class)
        .editEntity(department)
        .build();
dialogWindow.setClassName("department-detail-dialog");
dialogWindow.open();

And then use this class in CSS:

vaadin-dialog-overlay.department-detail-dialog::part(header) {
    display: none;
}
1 Like