Menu
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.)
717
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.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
