2010-09-15 11 views
12

W jaki sposób wyrównać wszystkie elementy w dolnej części po prawej stronie?Jak wyrównać elementy w <h:panelGrid> w prawo?

<div id="container">  
    <h:form id="authenticate"> 
     <h:panelGrid columns="5" cellpadding="6"> 
      <h:inputText id="email" value="" /> 
      <p:watermark for="email" value="Email"/> 
      <h:inputSecret id="password" value="" /> 
      <p:watermark for="password" value="Password"/> 
      <p:commandButton id="login" value="Login" align="right"/> 
     </h:panelGrid> 
    </h:form> 
</div> 

Odpowiedz

25

Wykonuje <h:panelGrid> renderuje tabelę HTML. Zasadniczo chcesz zastosować text-align: right; na każdym wyświetlanym elemencie <td>. Przy obecnym kodzie, najłatwiej byłoby zastosowanie następujące:

#authenticate table td { 
    text-align: right; 
} 

Można oczywiście być również bardziej szczegółowe, np podając <h:panelGrid> własny kod styleClass i definiując regułę w CSS (która byłaby zastosowana bezpośrednio na renderowanym elemencie HTML <table>).

<h:panelGrid styleClass="className"> 

z

.className td { 
    text-align: right; 
} 

Można również przekazać każdy element <td> własną klasę columnClasses atrybutu, który akceptuje commaseparated ciąg classnames CSS, które mają być wielokrotnie stosowane na <td> elementów. Jeśli chcesz zastosować tę samą klasę na każdym <td> elementu, wystarczy podać raz:

<h:panelGrid columnClasses="className"> 

z

.className { 
    text-align: right; 
} 

Jako dodatkową podpowiedź: kliknij prawym przyciskiem myszy stronę internetową w przeglądarce internetowej i wybierz View Źródło, wtedy zrozumiesz lepiej, co dokładnie JSF generuje.

+0

Uwaga: W kolumnie kolumny mają one zastosowanie do kolumn _rendered_, a nie do wszystkich wymienionych kolumn. Dla Mojarra 2.0 jest to jedyny sposób na ustawienie dowolnego atrybutu na wygenerowanym elemencie td. –

+0

Często poprawiasz "stare" posty, aby były bardziej ogólne, łatwiejsze do znalezienia itp. Czy to też można wyleczyć ?, zobacz http://stackoverflow.com/questions/30136972/how-to-specify-styles-for-hpanelgrid -in-jsf – Kukeltje

5

faktycznie w tej samej formie użyłem <p:panel> i uzyskałem dobry wynik. wygląda jak ;

<p:panel styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"> 
    <p:commandButton value="Add New Tab" 
      actionListener="#{xxx.createNewTab}" process="@this" 
      update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" /> 
      </p:panel> 
0

Trochę późno, ale może komuś pomóc, jak to było to, co potrzebne ...

Jeśli wyrównanie nie ogranicza się do tej konkretnej tabeli, ale domyślny format dla wszystkich komórek tabeli, następnie wystarczy dodać do pliku CSS:

td { 
    text-align: right; 
} 

następnie wszystkie <td> elementy, w tym te generowane przez JSF, zostanie sformatowany w ten sposób.

Powiązane problemy