Question

尝试从包含按钮的网格渲染器打开对话框。问题是对话框不遵守指定的大小。

我尝试设置对话框的宽度和高度，但是它仅影响子元素（看起来不像预期）并不影响DOM元素

    @Override
    public VerticalLayout createComponent(P item) {
                // this simply create a VerticalLayout
        VerticalLayout layout = super.createComponent(item);

        HorizontalLayout subLayout = new HorizontalLayout();
        subLayout.setWidthFull();
        subLayout.setDefaultVerticalComponentAlignment(Alignment.CENTER);

        this.button = new MSButton(this.colorClass, this.vaadinIcon);
        this.button.addClickListener(event -> {
            this.parent = item;
            this.grid.getDataProvider().refreshAll();
            this.dialog.open();
        });

        subLayout.add(this.button);
        layout.add(subLayout);

        return layout;
    }

    private void constructDialog() {
        this.dialog = new Dialog();

        H1 titleHolder = new H1(this.getDialogTitle());
        titleHolder.addClassName("mt-0");
        titleHolder.setWidthFull();

        H3 headerHolder = new H3(this.getDialogHeaderText());
        headerHolder.addClassName("mt-0");
        headerHolder.setWidthFull();

        HorizontalLayout headerRow = new HorizontalLayout();
        headerRow.add(headerHolder);
        headerRow.add(this.getDialogHeaderIcon().create());
        headerRow.setWidthFull();

        MSButton closeButton = new MSButton("Fermer", "success",
                VaadinIcon.CHECK_CIRCLE_O, event -> {
                    dialog.close();
                });

        HorizontalLayout footerRow = new HorizontalLayout();
        footerRow.add(closeButton);

        VerticalLayout footer = new VerticalLayout();
        footer.setDefaultHorizontalComponentAlignment(Alignment.END);
        footer.setAlignItems(Alignment.END);
        footer.setWidthFull();
        footer.add(footerRow);

        VerticalLayout container = new VerticalLayout();
        container.add(titleHolder);
        container.add(headerHolder);
        container.add(this.grid);
        container.add(footer);

        this.dialog.setWidth("700px");
        this.dialog.setHeight("500px");

        this.dialog.add(container);
    }

结果如下：https://ibb.co/HNcgLK2

Answer 1

通过使用Lumo主题而不是Material One来解决此问题。

Answer 2

最近遇到了同样的情况。您可以通过使用@HtmlImport设置对话框样式来禁用宽度限制：

AbstractAuthenticationProcessingFilter

具有以下内容：

CustomAuthenticationFilter

如何在vaadin-flow中正确指定对话框大小

2 个答案: