4 Replies Latest reply on Jul 2, 2009 10:07 AM by John Who

    just a simple alignment problem

    John Who Newbie

      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?!

        • 1. Re: just a simple alignment problem
          panky_p Novice

          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.

          • 2. Re: just a simple alignment problem
            John Who Newbie

            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?

            • 3. Re: just a simple alignment problem
              John Who Newbie

              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!!

              • 4. Re: just a simple alignment problem
                John Who Newbie

                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!