Проблемы с пользовательским компонентом JavaScript Vaadin, переполненным на другие компоненты в VerticalLayout

Question

У меня есть пользовательский компонент JavaScript (размещенный в VerticalLayout), высота которого динамически растет с пользовательским вводом - подобно полям редактирования stackoverflow с предварительным просмотром под ним.

Проблема заключается в том, что «предварительный просмотр» перекрывается с содержимым компонентов, размещаемых под пользовательским компонентом при достижении определенного размера. Представьте, что «предварительный просмотр» будет перемещаться за поле тегов и отправить кнопку в stackoverflow при записи более 4 строк.

css для компонента JavaScript не содержит информации о размерах (около ширины: 100%), а также нет VerticalLayout.

Вопрос: Как указать в Vaadin VerticalLayout, что компоненты должны перемещаться вниз, если размер более раннего компонента был изменен?

Или у вас есть другие идеи, как решить эту общую ситуацию?

Answer 1

Вы можете использовать setSizeFull() в VerticalLayout, чтобы он увеличивался на добавляемом к нему содержимом.

Answer 2

Проблема была надзором с .setStyleName("myComponentInstance");, которая использовалась в ExampleView для настраиваемого компонента. При проверке ExampleView.css я узнал, что кто-то определил определенный размер и высоту, которые мешали стилизации самого настраиваемого компонента - с очень запутанными результатами.

Так что, если вы наткнулись в подобную ситуацию при разработке компоненты JavaScript Vaadin:

1. Снимите myComponent.setStyleName("myComponentInstance") в использовании кода, чтобы избежать всех помех с вашим собственным стилем.

2. Не указывайте значение css height, но в зависимости от размера по умолчанию в компоненте VerticalLayout.