Question

In my sample application am having 3 action buttons in bottom of JSF page and it’s designed by 2 command button and one by command link . the problem is I gave same style class for these 3 , but command buttons displaying correctly in single line but command link not coming in same line.

Example in this page A is by and B,c are by

-----------------------------------------
|                                        |
|                                        |
|                                        |  
|                                        |
|                        ----- -----     |
|                 -----  | B | | c |     |
|                 | A |  ----- -----     |   
|                 -----                  |
-----------------------------------------

I need to display in same single line. Style class for these buttons are.

.ButtonStyle{
    border: 1px solid #999;
    padding:1px 4px 1px 4px;
    color: #333;
    background-color: #e7e7e7;
    text-decoration: none;
    margin-right: 10px;
    display: inline;
    cursor:pointer;
}

Coding for these 3 is:

<div align="right'>
 <h:commandLink id="" action=".."  value="A" styleClass="ButtonStyle"/> 
 <h:commandButton id="" action=".."  value="B" styleClass="ButtonStyle"/>
 <h:commandButton id="" action=".."  value="C" styleClass="ButtonStyle"/>
</div>

The problem which I found is in <h:commandlink> style is not match with <h:commandbutton>.

Can any one help me to come out of this?

Answer 1

Get firebug and try to analyse the css of the elements an their containers. Your Links and Buttons might inherit from other css-definitions.