0

My code:

<h:form>
    <h:panelGrid  columns="3">
        <p:inputText id="tweet" binding="#{input1}" label="tweet"  styleClass="selectMenu"/>
        <p:watermark for="tweet" value="Write a tweet here" />
        <p:commandButton style="vertical-align: middle;" value="Submit" action="#{testPageSentimentBean.navigate(input1.value)}"></p:commandButton>
    </h:panelGrid>
</h:form>

It renders like this:

enter image description here

Note: the watermark does not show, but that's off topic

How can I vertical align the inputText and the commandButton?

seinecle
  • 10,118
  • 14
  • 61
  • 120
  • 1
    Copy-pasting your code everything is aligned and watermark works as well. Maybe this class `selectMenu` breaks your style or some outer-form style? You can check in browser console (F12) if your components have some other classes and change its properties in order to see what breaks things. – Geinmachi Dec 19 '15 at 05:30
  • This is not really a JSF problem. I suggest to practice more with basic HTML and CSS. http://htmldog.com has really good tutorials. – BalusC Dec 19 '15 at 14:18

1 Answers1

1

Using column classes

XHTML:

 <h:panelGrid  columns="3" columnClasses="layoutColumn1,layoutColumn2,layoutColumn3">

css: 

.layoutColumn1 {
   vertical-align: top;
}
.layoutColumn2 {
   vertical-align: top;
}
.layoutColumn3 {
   vertical-align: top;
}
Mahendran Ayyarsamy Kandiar
  • 980
  • 1
  • 9
  • 24