Reputation: 129
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?
Upvotes: 0
Views: 8730
Reputation:
Get firebug and try to analyse the css of the elements an their containers. Your Links and Buttons might inherit from other css-definitions.
Upvotes: 1
Reputation: 228182
Try this (I'm guessing a bit because I'm not familar with JSF):
.ButtonStyle {
vertical-align: top
}
The default vertical-align
is baseline
, which would look like your ASCII art.
Upvotes: 4