Как изменить размер шрифта метки в ваадине в удобном для макета режиме?

Question

Скажем, у меня есть ярлык:

Label myLabel = new Label(_("I am smaller than normal text")); 
myLabel.setSizeUndefined(); 

(где _ любимая функция локализации).

Я бы хотел, чтобы он был меньше обычного. Поскольку нет одноранговой метод Ярлык для выполнения этого я должен прибегнуть к добавлению «сырые» правила CSS, например так:

CSSInject cssSmall = new CSSInject(".small { font-size: small; }"); 
myPage.addComponent(cssSmall); 
myLabel.addStyleName("small"); 
myPage.addComponent(myLabel); 

Это единственный вид работ. Да, текст : меньше, но когда страница сначала построена, Vaadin определяет размер этикетки так, как если бы шрифт был обычного размера. Когда что-то заставляет страницу перерисовываться/переписываться, Ваадин понимает, что происходит, и дает правильный размер этикетке.

Это заставляет страницу «прыгать» заметно, так как этикетка становится как короче, так и не столь высокой.

Как я могу обойти это?

Answer 1

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

Это будет выглядеть примерно так (это Groovy, но это легко перевести на Java или что вы используете:

new Label("<span style='font-size:small'>${StringEscapeUtils.escapeHtml4('&somesmalltext')}<span>").with{ 
    contentMode = ContentMode.HTML 
    it 
} 

Ключевым моментом здесь является, чтобы избежать текста, завернуть его в любом HTML, . и использовать ContentMode.HTML для Label

«правильный» способ справиться с этим просто, чтобы иметь тему, добавить свой:

.v-label.small { font-size: small } 

там, а затем установите стиль на вашей табличке:

myLabel.addStyleName("small")