esel esel - 5 months ago 131
CSS Question

Primefaces SelectOneMenu next to InputText is on different vertical position

When I put a Primefaces SelectOneMenu next to a Primefaces Input simply like this, they are not on the same height in the browser (same in Firefox, IE and Chrome):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head />
<h:body>
<p:selectOneMenu>
<f:selectItem itemLabel="Item1" />
</p:selectOneMenu>
<p:inputText value="Text" />
</h:body>
</html>


Is it possible (with css) to place those two inputs next to each other, such that they can be shown in one line at the same vertical position?

(I use Primfaces 5.1.)

Answer

Try with vertical-align property.

<h:body>
    <p:selectOneMenu style="vertical-align:middle">
        <f:selectItem itemLabel="Item1" />
    </p:selectOneMenu>
    <p:inputText value="Text" style="vertical-align:middle" />
</h:body>

Note that it is not necessarily should be middle to make components on the same height. Inspect generated html for selectOneMenu and input, try different values for vertical-align, and find the best variant for you.

Comments