Как правильно указать размер диалога в vaadin-flow

Попытка открыть диалоговое окно с помощью средства визуализации сетки, содержащего кнопку. Проблема в том, что диалог не соответствует указанному размеру.

Я пробовал установить ширину и высоту диалогового окна, но это не влияет на элемент 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


java dialog modal-dialog vaadin vaadin-flow
person Sidi Mohamed MOULEY SLIMANE    schedule 11.04.2019    source источник
comment
Вы пробовали setMinWidth и setMaxWidth?   -  person Steffen Harbich    schedule 11.04.2019
comment
Вы имеете в виду, что проблема в полосах прокрутки? Похоже, что Grid, который вы добавляете в диалог, больше, поэтому появляются полосы прокрутки. Кроме того, вы правы в том, что компонент получает размеры, кажется, что <div> из <vaadin-dialog-overlay> получает указанный размер. Я предполагаю, что design он работает как Dialog сложный компонент, но создает билет GitHub для Vaadin диалоговое окно, если оно вызывает ошибки. Кроме того, какие размеры у вас будут, если вы проверите их в DevTools?   -  person anasmi    schedule 11.04.2019
comment
Да, я пробовал setMinWidth и setMaxWidth, и все та же проблема, я перешел на тему Lumo, и все работает нормально, но с темой материала это не так (тема, которую я использовал раньше), vaadin-dialog-overflay принимает правильного размера, div внутри ‹flow-component-renderer› принимает нужный размер, а ‹flow-component-renderer› внутри ‹vaadin-dialog-overlay› - нет!   -  person Sidi Mohamed MOULEY SLIMANE    schedule 12.04.2019
comment
Вы думаете, что это ошибка? или это мое неправильное поведение? я имею в виду, должен ли я создать билет GitHub для диалогового окна Vaadin?   -  person Sidi Mohamed MOULEY SLIMANE    schedule 12.04.2019
comment
По теме: Установить ширину виджета «Диалог» в процентах от страницы в Vaadin 14   -  person Basil Bourque    schedule 23.01.2020

Ответы (2)


arrow_upward
0
arrow_downward

Исправлена ​​проблема с использованием темы Lumo вместо темы Material.

person Sidi Mohamed MOULEY SLIMANE    schedule 03.05.2019

arrow_upward
0
arrow_downward

Недавно столкнулся с таким же случаем. Вы можете отключить ограничение ширины, изменив стиль вашего диалога с помощью @HtmlImport:

@HtmlImport("styles/order-edit.html")
class OrderEdit(val orderId: String, okHandler: (Order)->Unit): Dialog() {
...
}

со следующим содержанием:

<dom-module id="dialog-fix" theme-for="vaadin-dialog-overlay">
    <template>
        <style>
            [part~="overlay"]{
                max-width: none !important;
            }
        </style>
    </template>
</dom-module>
person ru5t    schedule 28.07.2019
comment
См. Билеты по этой проблеме на сайте Vaadin GitHub, указанные в этом ответе. - person Basil Bourque; 23.01.2020