Comment puis-je verticalement centre d'un élément avec GWT?

Peut-être que je n'ai pas été la recherche de la bonne façon, mais je ne peux pas comprendre pour la vie de moi comment faire pour centrer un élément en utilisant GWT Mise en page des Panneaux.

Je suis en utilisant UiBinder et j'ai essayé tous les panneaux qui mettent en œuvre des HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel). Aucun d'entre eux semblent avoir aucun impact de la mise à l'alignement vertical (ou même à l'horizontale). J'ai fait en sorte qu'ils prennent 100% de la largeur et de la hauteur, a inspecté le résultant DOM mise en page de mon navigateur et rien ne semble l'être modifié à partir de ces propriétés.

Pertinentes UiBinder extrait (avec supplément docklayout éléments omis):

<g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" />
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

Rapide et sale fix que j'ai trouvé est de créer mon propre "CenterPanel" widget qui en gros est un wrapper autour d'une HTMLPanel avec un tableau HTML avec un valign="middle" de la cellule. Cependant, en fait cela se sent comme un retour à la classique css-mise en page du milieu problèmes de cadrage. Sûrement GWT a quelque chose à faire ce que j'ai complètement négligé?

  • Pourriez-vous donner quelques code source (c'est-à défaut de vous)? Alignement Vertical dans GWT peut être difficile parce que HasVerticalAlignment utilise vertical-align:middle, pas valign="middle".
  • Ah, je l'ai attendu autant. Alignement Vertical dans la valign sens n'a pas beaucoup de sens, sur un VerticalPanel. Alors, puisque je ne peux pas savoir à l'avance la hauteur du contenu de ce FlexTable, je devrait s'appuyer sur le standard CSS automatique de la marge d'astuces? J'espérais HasVerticalAlignment avait à l'interne de la magie pour résoudre ce problème aussi vieux que l'internet, mais je suppose que je devrais avez connu mieux. 😉
InformationsquelleAutor Camille | 2010-03-24
  1. 7

    Centrage d'un élément qui peut être fait avec un élément de cellule comme ceci:

    <g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>
    • Travaille aussi par l'instanciation de HorizontalPanel et de l'appel de setSize, setHorizontalAlignment, setVerticalAlignment
    InformationsquelleAutor mrbang
  2. 0

    Avez-vous essayé de réglage width moins de 100% ... je sens de la largeur de HorizontalPanel devient 100% ... donc, il occupe toute la DockLayoutPanel et donc la FlexTable peut-être aligné à gauche.

    InformationsquelleAutor RubyDubee
  3. 0

    Vous pouvez utiliser styleName attribut dans votre composant. Par Exemple:

    <g:DockLayoutPanel>
<g:center>
    <g:HorizontalPanel width="100%" height="100%" >
        <g:FlexTable ui:field="homeData" styleName="verticalAlign"/>
    </g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>

    et ont 

    .verticalAlign{
vertical-align: middle;
}

    dans votre style.css

    InformationsquelleAutor Hardik Mishra