Issues with presentation

[DaBe1812]

Hi,

I'm using Primefaces 10 and I have problems using the form layouts. My xhtml looks like this:

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui" template="../layout.xhtml">

	<ui:define name="header">
		<div id="header">Hardwareimport</div>
	</ui:define>

	<ui:define name="main">
		<h:form id="hwImportFrm">
			<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
			<div class="ui-fluid p-formgrid p-grid">
				<div class="p-field p-col-12 p-md-2">
					<p:commandButton value="Datei öffnen" icon="pi pi-file"
						actionListener="#{proIpsHwImportHander.openFile}" update="@this"
						styleClass="ui-button-success" style="margin-right: .5rem">
					</p:commandButton>
				</div>
				<div class="p-field p-col-12 p-md-5">
					<p:outputLabel for="@next" value="Auswahl Tabellenblatt" />
					<p:selectOneMenu id="tablesheet"
						value="#{proIpsHwImportHander.selectedSheet}">
						<f:selectItems value="#{proIpsHwImportHander.tablesheets}" />
					</p:selectOneMenu>
				</div>
				<div class="p-field p-col-12 p-md-5">
					<h:outputLabel for="@next" value="Dateiname" />
					<p:inputText id="filename" type="text"
						value="#{proIpsHwImportHander.filename}" />

				</div>

			</div>
		</h:form>
	</ui:define>
</ui:composition>

Following the demo the three elements should show side by side, but they appear to be all vertically alligned.

What am I missing?

Thanks for help.
Daniel