just a simple alignment problem

[hrbaer]

I'm just trying to align a button right, but nothing works.
I think I'm just miss something...

Here my code:

<rich:dataTable cellpadding="0" cellspacing="0" width="70%" border="0" var="record" value="#{mb.liste}">
 <rich:column width="50%">
 <f:facet name="header"><h:outputText value="Anzahl" /></f:facet>
 <h:outputText value="#{record.anzahl}" />
 </rich:column>
 <rich:column width="50%">
 <f:facet name="header"><h:outputText value="xy" /></f:facet>
 <h:outputText value="#{record.xy}" />
 </rich:column>
</rich:dataTable>
<h:panelGrid columns="1" width="70%" border="1" cellspacing="0" cellpadding="0" columnClasses="alignRight">
 <h:commandButton action="#{mb.edit}" value="Edit" />
</h:panelGrid>

css-style:

.alignRight {
 text-align:right;
}

But the button is with alignment left and there are also no borders?!

[panky_p]

can you try

style="float: right;"

on your commandButton and for border you will need to inspect it in firebug or generated html code it may possible the border is not getting applied to panelGrid.

[hrbaer]

Doesn't have any effect.

This is the rendered HTML-Code:

<table class="dr-table rich-table " id="hauptkag:hauptkagForm:j_id_id16" border="0" cellpadding="0" cellspacing="0" width="70%">
<colgroup span="3"></colgroup>
<thead class="dr-table-thead">
<tr class="dr-table-subheader rich-table-subheader ">
<th class="dr-table-subheadercell rich-table-subheadercell " scope="col" id="hauptkag:hauptkagForm:j_id_id16:j_id_id26header">
 <div id="hauptkag:hauptkagForm:j_id_id16:j_id_id26header:sortDiv">Anzahl</div>
</th>
<th class="dr-table-subheadercell rich-table-subheadercell " scope="col" id="hauptkag:hauptkagForm:j_id_id16:j_id_id26header">
 <div id="hauptkag:hauptkagForm:j_id_id16:j_id_id26header:sortDiv">xy</div>
</th>
</tr>
</thead>
<tbody id="hauptkag:hauptkagForm:j_id_id16:tb">
<tr class="dr-table-row rich-table-row dr-table-firstrow rich-table-firstrow ">
 <td class="dr-table-cell rich-table-cell " id="hauptkag:hauptkagForm:j_id_id16:0:j_id_id26" width="50%">2</td>
</tr>
<tr class="dr-table-row rich-table-row dr-table-firstrow rich-table-firstrow ">
 <td class="dr-table-cell rich-table-cell " id="hauptkag:hauptkagForm:j_id_id16:0:j_id_id26" width="50%">xy</td>
</tr>
</tbody>
</table>

<table>
<tbody>
<tr>
<td class="alignRight"><input type="submit" name="hauptkag:hauptkagForm:j_id_id32" value="Anlegen" /></td>
</tr>

</tbody>
</table>

Neither the border-attribute nor the style-attribute are in the table.
And border seems to be a valid attribute to panelGrid: http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs/h/panelGrid.html

Any other ideas?

[hrbaer]

I just reduced the example of only the minimum

JSP-Code:

<h:panelGrid columns="1" columnClasses="alignRight" style="width:500px;">
 <h:commandButton action="#{mb.detail}" value="Detail" style="float: right;"/>
</h:panelGrid>

HTML-Code:

<table>
<tbody>
<tr>
<td class="alignRight"><input type="submit" name="hauptkag:hauptkagForm:j_id_id32" value="Detail" /></td>
</tr>
</tbody>
</table>

What I'm surprised is that there is no info about the width in the -tag. Even when I replace the style="width:500px" width the "normal" width="500px" it does have no effect!!

[hrbaer]

Ok, I found the solution.

The ONLY way to influence the panelGrid properties is with the styleClass-attribute! No 'style="width.."' or 'width=""' works!

I hope this helps if there is anybody else with the same problem!