CSS стиль этикетки Vaadin

Question

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

Можно ли нарисовать текстовое поле, чтобы он выглядел как ярлык? Как я могу это сделать, если это возможно?

Answer 1

Вы можете переопределить стили Vaadin в своей собственной теме. Если у вас еще нет темы, создайте каталог в директории VAADIN с именем themes и создайте поддиректорию в темах по имени вашей темы, например. MyTheme.

Vaadin 6:

1. Вызов setTheme("mytheme") в прикладном классе
2. вызовов myTextField.setStyleName("labelstyle"); в коде
3. Создать styles.css в новом каталоге темы.
4. Добавьте следующее в styles.css:

styles.css:

@import "../reindeer/styles.css"; 

.v-textfield-labelstyle { 
    background: none repeat scroll 0 0 #F5F5F5; 
    border-color: #F5F5F5; 
    border-image: none; 
    border-left: 1px solid #F5F5F5; 
    border-radius: 3px 3px 3px 3px; 
    border-right: 1px solid #F5F5F5; 
    border-style: solid; 
    border-width: 1px; 
} 

Vaadin 7:

1. Добавить @Theme("mytheme") аннотаций в классе UI
2. Вызовите myTextField.setStyleName("labelstyle"); в своем коде
3. Создать стили. scss в вашем новом каталоге тем.
4. Добавьте следующие стили. СКС

styles.css:

@import "../reindeer/reindeer.scss"; 

.mytheme { 
    @include reindeer; 

    .v-textfield-labelstyle { 
     background: none repeat scroll 0 0 #F5F5F5; 
     border-color: #F5F5F5; 
     border-image: none; 
     border-left: 1px solid #F5F5F5; 
     border-radius: 3px 3px 3px 3px; 
     border-right: 1px solid #F5F5F5; 
     border-style: solid; 
     border-width: 1px; 
    } 
} 

1. Компиляция вашу тему по телефону java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css в каталоге темы

Этот маленький трюк даст вам этикетки типа TextField который при фокусировке превращается в обычный TextField.

Обратите внимание, что это будет работать только при использовании темы «Оленевод» и цвета фона по умолчанию # F5F5F5. Вам придется немного подкорректировать его, если вы используете какую-либо другую тему или цвет фона отличается от оригинала.

Answer 2

текстовое поле, представленное этим HTML:

<input type="text" class="v-textfield v-widget" tabindex="0" style=""> 

насчет применения этого: How to remove border (outline) around text/input boxes? (Chrome) на "v-v-TextField виджета" CSS?