Установить ширину виджета «Диалог» в процентах от страницы в Vaadin 14

Question

В Vaadin 14 виджет Dialog открывается правильно при указании ширины и высоты на px (CSS виртуальных «пикселей» ).

Dialog dialog = new Dialog();
dialog.setCloseOnEsc( true );
dialog.setCloseOnOutsideClick( true );
dialog.add( new Label( "whatever" ) );
dialog.setWidth( "500px" );                // ?  width
dialog.setHeight( "700px" );               // ?  height

К сожалению, меняя это значение 500px на 80%:

dialog.setWidth( "80%" );                  // ?  width as percentage (%)
dialog.setHeight( "700px" );               // ?  height

Я ожидаю, что диалоговое окно теперь займет большую часть windows браузера. Я получаю прямо противоположное. В результате ширина диалогового окна составляет только треть окна , а не 80% . И ширина остается неизменной, поскольку пользователь изменяет размер окна браузера.

➥ Как получить Dialog для заполнения большей части, но не всего окна браузера, и быть динамически изменяемым c как пользователь увеличивает / уменьшает ширину / высоту окна?

---

Пример

Вот целый рабочий пример приложения, основанного на стартовом проекте "plain Java Servlet", предоставленном Vaadin. com site.

package work.basil.example.dialog_by_percent;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        Button buttonPx = new Button( "Dialog by px" ,
                event -> this.dialogByPx()
        );

        Button buttonPercentage = new Button( "Dialog by px" ,
                event -> this.dialogByPercentage()
        );

        add( buttonPx , buttonPercentage );
    }

    private void dialogByPx ( )
    {
        Dialog dialog = new Dialog();
        dialog.setCloseOnEsc( true );
        dialog.setCloseOnOutsideClick( true );
        dialog.add( new Label( "px" ) );
        dialog.setWidth( "500px" );                // ?  width
        dialog.setHeight( "700px" );               // ?  height
        dialog.open();
    }

    private void dialogByPercentage ( )
    {
        Dialog dialog = new Dialog();
        dialog.setCloseOnEsc( true );
        dialog.setCloseOnOutsideClick( true );
        dialog.add( new Label( "percentage (%)" ) );
        dialog.setWidth( "80%" );                  // ?  width
        dialog.setHeight( "700px" );               // ?  height
        dialog.open();
    }
}

При запуске.

dialog.setWidth( "500px" )

Dialog with px">

dialog.setWidth( "80%" )

Dialog with percentage">

Answer 1

Как я могу получить диалоговое окно для заполнения большей части, но не для всего окна браузера, и быть динамичным c с изменением размера при увеличении / уменьшении ширины / высоты окна?

Установив ширину / высоту равным overlay части vaadin-dialog-overlay, используя CSS.

Более длинная версия

---

Поведение, которое вы видите, следствие применения стиля к div внутри flow-component-renderer, а не к части overlay, как можно было бы ожидать. Соответствующие заявки:

• setWidth и setHeight либо не работают, либо неправильно задокументированы
• Добавьте примечание, что setWidth устанавливает ширину для 'flow-component-renderer', а не самого оверлея / диалогового окна

Если вы осмотрите диалоговое окно с фиксированной шириной в DevTools, вы заметите, что само диалоговое окно на самом деле шире.

правильный (я имею в виду, что это правильно, но не ожидаемый) способ состоит в том, чтобы стилизовать overlay часть диалога с помощью css, используя:

[part="overlay"]{
    width:80%;
}

и

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

После этого ширина принимает 80% как положено. Я надеюсь, что скриншот выше иллюстрирует проблему лучше:

---