CSS style de l'étiquette de Vaadin

Je suis en train de faire la modification en ligne de Vaadin. Je pense qu'une bonne façon d'y parvenir est de style
les champs de texte pour les faire ressembler à des étiquettes, et changer de style d'un champ de texte lorsque concentré.

Est-il possible de style champ de texte pour ressembler à l'étiquette? Comment puis-je le faire si c'est possible?

Vous avez un exemple de ce que vous voulez qu'il ressemble? Je suppose que c'est possible, mais étiquette de "de" est assez large, à moins que vous parlez HTML " <label></label>'
Ouais... quel look allez-vous pour?
J'ai de la grille de mise en page de la sorcière des domaines comme: "nom", "prénom", "téléphone", etc. et les valeurs d'eux, j'ai envie de cliquer sur le texte, par exemple "John" et "Jean" doit devenir champ de texte modifiable, après la mise au point d'une autre un "Jean" doit être en texte brut à nouveau

OriginalL'auteur akuzma | 2013-02-13

  1. 5

    Vous pouvez remplacer le Vaadin styles dans votre propre thème. Si vous n'avez pas un thème encore, créez un sous-répertoire de la VAADIN dir appelé themes et de créer un sous-répertoire de thèmes par le nom de votre thème, par exemple. mytheme.

    Vaadin 6:

    1. Appel setTheme("mytheme") dans votre classe d'application
    2. Appel myTextField.setStyleName("labelstyle"); dans votre code
    3. Créer des styles.css dans votre nouveau répertoire de thème.
    4. Ajouter ce qui suit dans les styles.css:

    les 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. Ajouter @Theme("mytheme") annotation dans votre INTERFACE utilisateur de la classe
    2. Appel myTextField.setStyleName("labelstyle"); dans votre code
    3. Créer des styles.scss dans votre nouveau répertoire de thème.
    4. Ajouter ce qui suit dans les styles.scss

    les 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. Compiler votre thème en appelant java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css dans votre répertoire de thème

    Cette petite astuce va vous donner une Étiquette comme TextField qui se transforme en un normal TextField quand concentré.

    Noter que cela ne fonctionne que lors de l'utilisation de Rennes thème et la couleur de fond par défaut #F5F5F5. Vous devrez ruser un peu si vous utilisez un autre thème ou la couleur d'arrière-plan différent de celui d'origine.

    OriginalL'auteur miq

  2. 1

    Champ de texte est représenté par le présent code HTML: 

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

    Ce qui concerne l'application de cette: Comment faire pour supprimer la bordure (contour) autour du texte/des boîtes d'entrée? (Chrome) sur "v-textfield v-widget" CSS?

    OriginalL'auteur Ondrej Kvasnovsky