如何在vaadin-flow中正确指定对话框大小 [英] How to correctly specify dialog size in vaadin-flow

问题描述

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

Trying to open a dialog from a grid renderer which contain a button. The problem is that the dialog isn't respecting the specified size.

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

I've tried setting the width and height of the dialog but it doesn't affect the DOM element only its childs (which doesn't look as expected)

    @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

推荐答案

通过使用Lumo主题而不是材质一"解决了该问题.

Fixed the problem by using Lumo theme instead of Material one.

这篇关于如何在vaadin-flow中正确指定对话框大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！