Как узнать ширину кнопки в Vaadin 10?

Так что у меня есть три кнопки, как это.

3 кнопки Vaadin в Lumo.DARK

Моя цель - сделать эти кнопки одинаковой ширины.
Чтобы сделать это, я хотел бы проверить ширину каждой кнопки, поместить наибольшее значение (в данном случае - 2-я кнопка) в переменную, а затем сделать ширину каждой кнопки этим значением.
Я не хочу устанавливать ширину с помощью магического числа, потому что текст на моих кнопках может измениться.

Я пытался сделать это так:

String maxWidth = findMaxValue(button1.getWidth(), button2.getWidth(), button3.getWidth());
button1.setWidth(maxWidth);
button2.setWidth(maxWidth);
button3.setWidth(maxWidth);

Проблема в том, что getWidth() возвращает null, если метод setWidth не установлен заранее. Итак, как мне узнать ширину кнопок?


vaadin vaadin-flow vaadin10
person John    schedule 07.09.2018    source источник
comment
Попробуйте использовать VerticalLayout и setHorizontalAlignment для STRETCH.   -  person Steffen Harbich    schedule 10.09.2018

Ответы (1)


arrow_upward
7
arrow_downward

Исправьте это с помощью CSS

Я понимаю, чего вы пытаетесь достичь, но я думаю, что есть лучшие способы сделать это, чем измерение размеров коробки. Я думаю, вы могли бы добавить обертку div вокруг кнопок и немного css и позволить браузеру позаботиться об этом.

Например, у flex-box должны быть решения. Вот быстрый тест, который я сделал.

<style>
  .my-layout {
    display: inline-flex;
    flex-direction: column;
  }
</style>
...   
<div class="my-layout">
  <vaadin-button>my button 1</vaadin-button>
  <vaadin-button>my very cool button 2</vaadin-button>
  <vaadin-button>b 3</vaadin-button>
</div>

Производит это:

Кнопки одинаковой ширины

Демонстрация

Код

Получение ширины отображаемого элемента

Если вам нужен ответ на вопрос, который вы задали изначально, я думаю, вы можете получить его из Element API примерно так:

button1.getElement().getProperty("offsetWidth",0);

но вам, возможно, придется синхронизировать свойства, и они могут быть недоступны, когда вы изначально визуализируете элементы, поскольку в этот момент у них нет ширины. См. документацию по управлению DOM с помощью Element API. Узнать больше.

person Jens Jansson    schedule 07.09.2018