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

Question

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

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

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

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

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

Answer 1

Исправить это с помощью 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, чтобы узнать больше.