Dialog's width restricted to approx. 500px?

Flow
1

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

setWidth("800px");
setHeight("500px");

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
Michael

2

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

3

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) {
		
		setCloseOnEsc(true);
		setCloseOnOutsideClick(true);

		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);
		add(hl);
		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");
			add(ta);
		}	
		setWidth("800px");
		setHeight("500px");
	}
}

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
Michael

4

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.

5

Hi
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
Michael

6

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

7

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
Michael

8

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:

[part="overlay"]
{
	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")
9

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

Kind Regards
Michael