inputText and selectOneMenu width problems

[pfroy]

Hi,

How do I manage to make p:inputText and p:selectOneMenu width identical when used in a form? Look at the code for this form. My inputText width is Wid95. I provided an example of selectOneMenu using Wid90 and wid95 to show the differences. I need a simple and effective way to specify the same width for every controls in a form.

Regards,
Pierre

Code: Select all

<h:form id="AssetCreateForm">
	<h:panelGroup id="display">
		<div class="Container70 Responsive100">
			<p:panelGrid columns="1" styleClass="ui-panelgrid-blank" layout="grid">
			<p:outputLabel value="Nom" for="name"/>
			<p:inputText id="name" value="#{assetController.selected.name}" styleClass="Wid95"/>
			<p:outputLabel value="Pièce" for="facilityLocation"/>
			<p:selectOneMenu id="facilityLocation" value="#{assetController.selected.facilityLocation}" styleClass="Wid90">
				<f:selectItem itemLabel="#{bundle.SelectOneLocation}" noSelectionOption="true"/>
				<f:selectItems value="#{facilityLocationController.itemsAvailableSelectOne}"/>
			</p:selectOneMenu>
			<p:outputLabel value="Type" for="category"/>
			<p:selectOneMenu id="category" value="#{assetController.selected.category}" styleClass="Wid95">
				<f:selectItem itemLabel="#{bundle.SelectOneType}" noSelectionOption="true"/>
				<f:selectItems value="#{assetCategoryController.itemsAvailableSelectOne}"/>
			</p:selectOneMenu>
			...

[mert.sincan]

I didn't find Wid95 class in our documentation. http://www.primefaces.org/volt/docs/core/widx.xhtml

For your issue, I think you can use ui-fluid class. Detail;
http://www.primefaces.org/showcase/ui/m ... sive.xhtml

Please remove WidX classes (Wid90, Wid95, etc.) and add ui-fluid class to parent element of components;
Exp;

Code: Select all

<h:form id="AssetCreateForm">
   <h:panelGroup id="display">
      <div class="Container70 Responsive100">
         <p:panelGrid columns="1" styleClass="ui-panelgrid-blank ui-fluid" layout="grid">

             <p:outputLabel value="Nom" for="name"/>
             <p:inputText id="name" value="#{assetController.selected.name}"/>

             <p:outputLabel value="Pièce" for="facilityLocation"/>
             <p:selectOneMenu id="facilityLocation" value="#{assetController.selected.facilityLocation}">
                <f:selectItem itemLabel="-- Selectionner une piece --" noSelectionOption="true"/>
                <f:selectItems value="#{facilityLocationController.itemsAvailableSelectOne}"/>
             </p:selectOneMenu>

             <p:outputLabel value="Type" for="category"/>
             <p:selectOneMenu id="category" value="#{assetController.selected.category}">
                <f:selectItem itemLabel="-- Selectionner un type --" noSelectionOption="true"/>
                <f:selectItems value="#{assetCategoryController.itemsAvailableSelectOne}"/>
             </p:selectOneMenu>

         </p:panelGrid>
      </div>
   </h:panelGroup>
</h:form>

(Please see; <p:panelGrid columns="1" styleClass="ui-panelgrid-blank ui-fluid" layout="grid">)

Screenshot;