Dialog's width restricted to approx. 500px?

I have a subclass of a dialog and setting width and height:


But all i get is a dialog which is having a width of approx 500px and some scrollbars…

What am i doing wrong / what’s missing

Kind regards

It’s working fine for me. Can you share the complete code?

Sure it’s not top secret. It’s a standard exxception dialog:

import org.apache.commons.lang3.StringUtils;
import org.apache.commons.lang3.exception.ExceptionUtils;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;

public class ExceptionDialog extends Dialog {

	public ExceptionDialog(String msg, Throwable t) {

		Label lbl = new Label(msg);
		Button btnClose = new Button("", VaadinIcon.CLOSE.create());
		btnClose.addClickListener(e -> {close();});
		HorizontalLayout hl = new HorizontalLayout(lbl,btnClose);
		hl.setFlexGrow(2.0, lbl);
		if (t != null) {
			Div ta = new Div();
			String html = "<nobr>" + StringUtils.replace(ExceptionUtils.getStackTrace(t), "\n", "</nobr><br><nobr>") + "</nobr>";
			ta.getElement().setProperty("innerHTML", html);
			ta.getElement().getStyle().set("font-size", "smaller");

It’s testwise opened on the Login-Screen (same like the sample application). Using a Flexlayout and Material (dark) theme

Thanks for your support and kind regards

Your class works like a charm for me (Vaadin 14.1.17, on chrome and firefox). I tried resizing it to 1000px and 100px and it works fine as well.

I think it’s a problem with the Material Theme.

When i create a new (Bookstore-)Project (with a Lumo-Theme) and add the Dialog everything is working great.
After changing the theme in the MainLayout to @Theme(value = Material.class, variant = Material.DARK) i get the limited dialog boundaries again…

Kind Regards

This is strange: the Material theme is also working fine with me.

Hmm which Java version do you use to build your app?

I’m using jdk1.8.0_162…

I’ve upload my project to https://drive.google.com/open?id=1wDJU1HldRD_cDmwo2Z9azS_TzNEpxhbD - perhaps you can try with my one?!

Kind regards

Now I can reproduce the issue, and it seems to be related to the max-width property of vaadin-dialog in the Material theme being defaulted to 560px. (see, https://github.com/vaadin/vaadin-dialog/issues/127).

To override this default, you can create a css file (e.g. vaadin-dialog-overlay.css) in the project’s frontend folder in which you choose the desired max-width property, like so:

	max-width: 1000px;

Then import this style in your java code (e.g. in the MainLayout class) using the annotation:

@CssImport(value = "./styles/vaadin-dialog-overlay.css", themeFor = "vaadin-dialog-overlay")

Thank you for your support. That worked for me!
Didn’t know the limitation of material design to 650px width

Kind Regards