This topic is the discussion thread for the Vaadin documentation page Dialog component | Vaadin components.
Questions, feedback, and comments are welcome here.
In Closing:
2. Clicking outside the Dialog
Is it possible to disable this specific behavior?
Dialog.setCloseOnOutsideClick(false);
Before, we could have captions and icons in Window classes. How do we now do that new Dialog?
Use setHeaderTitle() for a caption/label/title. Use a custom header component if you want to add an icon: https://vaadin.com/docs/latest/components/dialog/#header
How can i scroll to the end of the "content" part if the content is big? Is there a way to easily select the shadowRoot-part content somehow?
I was wondering if you can set size of dialogs in CSS, I havent succeeded.
Given a dialog where I set className = "my-dialog" I tried the following:
.my-dialog vaadin-dialog-overlay::part(overlay) {
width: 1360px;
height: 900px;
}
But it didn't have any effect.
I can see the overlay part for which the size needs to be set in the shadow root of the my-dialog element:
<vaadin-dialog-overlay ... class="my-dialog" ...>
#shadow-root
<div part="overlay" ...>
But I seem to misunderstand how to to set the properties with CSS there. How would one do that and is it even possible?
Currently I'm setting the width in the Java code of the dialog, which works.
The correct CSS selector would be this, if you’ve managed to get that ´my-dialog` classname on the `vaadin-dialog-overlay` element:
vaadin-dialog-overlay.my-dialog::part(overlay) {
width: 1360px;
height: 900px;
}
Works! Thanks a lot for the quick reply. I would love to mark your answer as solution, but oddly enough I can only mark my own answer here as such and not yours...
i am trying to set the position of the Dialog. i want the dialog not be centered. it should be shown in the right corner of the screen.
overriding the Style does not work, since the Style is in a different component ("vaadin-dialog-overlay" than "dialog".
// not owrking getElement().getStyle().setAlignItems(AlignItems.END);
// workaround
public class ActivityDialog extends Dialog {
@Override
public void open() {
super.open();
updateStyle();
}
private void updateStyle() {
setWidth(30, Unit.REM);
setHeightFull();
setCloseOnEsc(true);
setCloseOnOutsideClick(true);
setModal(true);
setDraggable(false);
addThemeVariants(DialogVariant.LUMO_NO_PADDING);
// show dialog on right side of the screen
getElement().executeJs(
"""
const overlay = document.querySelector('vaadin-dialog-overlay#overlay');
if (overlay) {
overlay.style.alignItems = 'end';
}
""");
}
Well done Vaadin Team. I have an issue. I am developing vaadin app with kotlin. I have a vaadin dialog which I use to accept employee data, Then save the data into postgres database using background coroutine. Which is working fine. After saving the data I want to close the dialog by accessing the UI thread if the data saved successfully but the dialog is not closing. I can access my UI thread successfully but the dialog is not closing. Please can you help me out may be there is something I am missing. Below is my code. Thank you.
below is a method that handle save
private fun handleSave() {
//if (isLoading) return
val ui: UI? = UI.getCurrent()
try {
val employee = currentEmployee ?: Employee()
binder.writeBean(employee) // Validate form
launchUiCoroutine{
onSave(employee)
ui?.withUi {
style.setBackground("gold")
close()
}
}
//setLoading(true)
} catch (e: ValidationException) {
Notification.show("Fix validation errors", 3000, Notification.Position.MIDDLE)
}
}
\u0000
Typically this is either that you don’t use @Push in you AppShellConfigurator and then there is no websocket based communication, or you are not syncing your changes with UI.access() method (I assume that withUI method is doing that \uD83E\uDD14). Double check those.
Thanks for the quick response sir. Below is my utility file which contains withUi method and launchUiCoroutine method.
package com.ems.utilimport com.vaadin.flow.component.UI
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
import kotlinx.coroutines.suspendCancellableCoroutine
import kotlin.coroutines.resume// Launch coroutine in background scope
fun launchUiCoroutine(block: suspend CoroutineScope.() -> Unit) {
CoroutineScope(Dispatchers.IO).launch {
block()
}
}// Suspend coroutine, then run block on Vaadin UI thread
suspend fun <T> UI.withUi(block: () -> T): T = suspendCancellableCoroutine { cont ->
access {
try {
val result = block()
cont.resume(result)
} catch (e: Exception) {
cont.cancel(e)
}
}
}
But I didn’t include @Push. Will do that and give feedback. Thank you once again
But before updating here is response after running the code below
ui?.withUi {
println(isAttached)
close()
println(isAttached)
}
true
false
But still not the Dialog is there on my screen. Thanks. Will include @Push and give you feedback
I am not Kotlin expert, so I am just commenting this based on how I did a blocking Dialog with Java using background threads
https://v-herd.eu/tatulund-addons/blocking-dialog
The important thing to note here is that @Push is needed, also you should not block the request, i.e. Vaadin, i.e. UI thread. That would suspend server request processing and your application would not work that way.
What you can do is to block the background thread.
@Matt Tahvonen You are correct, just like magic after I include @Push and AppShellConfigurator It works. Thank you so much. I love you framework vaadin.
@Tatu Lund Thank you for the response. The first suggestion solve my issue.