Wie kann ich ein Element mit GWT vertikal zentrieren?

Vielleicht habe ich nicht den richtigen Weg gesucht, aber ich kann nicht für das Leben von mir herausfinden, wie man ein Element mit GWT Layout Panels zentriert.Wie kann ich ein Element mit GWT vertikal zentrieren?

Ich benutze UiBinder und ich habe alle Panels ausprobiert, die HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel) implementieren. Keiner von ihnen scheint Auswirkungen durch die Einstellung der vertikalen Ausrichtung (oder sogar horizontal) zu haben. Ich habe sichergestellt, dass sie 100% Breite und Höhe nehmen, habe das resultierende DOM-Layout von meinem Browser aus inspiziert und nichts scheint sich von diesen Eigenschaften zu unterscheiden.

Einschlägige UiBinder Extrakt (mit extra docklayout Elemente weggelassen):

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

Die quick and dirty fix Ich dachte, ich heraus ist meine eigene "CenterPanel" Widget zu erstellen, die im Grunde ein Wrapper um ein HTMLPanel ist mit eine HTML-Tabelle mit einer valign = "mittlere" Zelle. Dies fühlt sich jedoch grundsätzlich wie ein Rückfall zu den klassischen CSS-Layout-Mittelzentrierungsproblemen an. Sicherlich hat GWT etwas zu tun, was ich komplett übersehen habe?

Quelle

2010-03-24 Camille

Könnten Sie einige Quellcode bereitstellen (die Sie versagt)? Die vertikale Ausrichtung in GWT kann schwierig sein, da HasVerticalAlignment 'vertical-align: middle', nicht' valign = "middle" 'verwendet. –

Ah, hätte ich so viel erwartet. Die vertikale Ausrichtung im Valign-Sinn machte auf einem VerticalPanel keinen Sinn. Da ich im Voraus nicht wissen kann, wie hoch der Inhalt dieser FlexTable ist, sollte ich mich auf die Standard-CSS-Auto-Margin-Tricks verlassen? Ich hatte gehofft HasVerticalAlignment hatte einige interne Magie, um dieses Problem so alt wie das Internet zu beheben, aber ich denke, ich hätte es besser wissen müssen. ;) – Camille

Haben Sie width weniger als 100% Einstellung versucht ... ich fühle mich die Breite HorizontalPanel 100% wird ... so nimmt es ganze DockLayoutPanel und damit die FlexTable könnte ausgerichtet werden immer links.

Quelle

2010-03-25 13:36:04 RubyDubee

ein Element Zentrieren kann mit einem Zellenelement wie folgt erfolgen:

<g:HorizontalPanel width="100%" height="100%"> 
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE"> 
    <g:Label>Hello Center</g:Label> 
</g:cell> 
</g:HorizontalPanel>

Quelle

2011-07-17 18:41:28 mrbang

Funktioniert auch durch Instanziieren von HorizontalPanel und Aufrufen von setSize, setHorizontalAlignment, setVerticalAlignment – djjeck

Sie styleName Attribut in Ihrer Komponente verwenden können. Zum Beispiel:

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

und haben

.verticalAlign{ 
vertical-align: middle; 
}

in Ihrem style.css

Quelle

2011-11-16 06:22:15

Wie kann ich ein Element mit GWT vertikal zentrieren?

Antwort

Verwandte Themen