Input inside header facet of datatable is wrong

[otinanism]

I am having trouble understanding the concept and the difference between ContainerX and WidX so bare with me if my xhtml is not correct.

I have a datatable with a header facet which contains an input field to be used as a global filter. The structure was taken from the datable.xhtml sample file from the layout:

Code: Select all

<div class="Container100">
			<div class="Card">
				<div class="CardTopic Blue">Products</div>
				<div class="Separator"></div>
				<div class="Container100">
					<h:form id="iipForm">
						<p:dataTable id="internalInsulationProductsTable" var="product"
							value="#{internalInsulationProductsController.viewData.products}"
							paginator="true" rows="5" reflow="true"
							rowsPerPageTemplate="5,10,15" rowHover="true"
							filteredValue="#{internalInsulationProductsController.filteredRecords}"
							sortBy="#{product.name}" widgetVar="iipProducts">

							<f:facet name="header">
								<p:inputText id="globalFilter"
									placeholder="Search"
									onkeyup="PF('iipProducts').filter()"
									styleClass="Container100 Responsive100" />
							</f:facet>

							<p:column headerText="name" filterBy="#{product.name}"
								sortBy="#{product.name}">
								<h:outputText value="#{product.name}" />
							</p:column>

						</p:dataTable>
					</h:form>
				</div>
			</div>

</div>

When I style the input as "Container100 Responsive100" I get the following result:



When I style it as "Wid100 Responsive100" I get the following:



What I expect to see is probably the latter without the overflow of course.

Any help will be appreciated.

Alex

[mert.sincan]

Which PF-version are you using?

[otinanism]

Version 5.3

[mert.sincan]

We use ContainerX , WidX, ResponsiveX etc. classes for layout. You can write inline style for components Or I propose to use ui-fluid class. PF5.3 supports ui-fluid class. Details; http://www.primefaces.org/showcase/ui/m ... sive.xhtml and http://blog.primefaces.org/?p=3639 (Responsive Design)

Please try with;

Code: Select all

/* CSS */
<style type="text/css">
   .ui-datatable-header .ui-inputfield {
        background-color: #ffffff;
   }
</style>

/* test page */
<div class="Container100">
         <div class="Card">
            <div class="CardTopic Blue">Products</div>
            <div class="Separator"></div>
            <div class="Container100 ui-fluid">
               <h:form id="iipForm">
                  <p:dataTable id="internalInsulationProductsTable" var="product"
                     value="#{internalInsulationProductsController.viewData.products}"
                     paginator="true" rows="5" reflow="true"
                     rowsPerPageTemplate="5,10,15" rowHover="true"
                     filteredValue="#{internalInsulationProductsController.filteredRecords}"
                     sortBy="#{product.name}" widgetVar="iipProducts">

                     <f:facet name="header">
                        <p:inputText id="globalFilter"
                           placeholder="Search"
                           onkeyup="PF('iipProducts').filter()" />
                     </f:facet>

                     <p:column headerText="name" filterBy="#{product.name}"
                        sortBy="#{product.name}">
                        <h:outputText value="#{product.name}" />
                     </p:column>

                  </p:dataTable>
               </h:form>
            </div>
         </div>

</div>

[otinanism]

First of all thank you for the feedback!

I am not sure I understand the solution.

If I use the example you posted the input width is not 100%. I need it to be 100%. You have removed the styleClass from the input field of the header facet that is why it is not 100%.

If I use a PF grid css class in the input (styleClass="ui-grid-col-12") the table is still not correctly rendered.

Maybe I was not clear about the width

[mert.sincan]

Are you using ui-fluid class? (<div class="Container100 ui-fluid">) When you use this class in parent tag of your components, some components will be responsive component. Exp; <p:inputText> (http://www.primefaces.org/showcase/ui/m ... sive.xhtml)
Your code;

Code: Select all

...
<div class="Container100 ui-fluid">
        
        <h:form id="iipForm">
             <p:dataTable ..>
                     <f:facet name="header">
                        <p:inputText id="globalFilter" placeholder="Search" onkeyup="PF('iipProducts').filter()" />
                     </f:facet>
....

And css;

Code: Select all

<style type="text/css">
   .ui-datatable-header .ui-inputfield {
        background-color: #ffffff;
   }
</style>

Screenshot;


Note;
We add this css on Primefaces 5.3;
.ui-fluid .ui-inputtext {
width: 100%;
}

[otinanism]

I am sorry, you are absolutely right this does work! I don't know what I was doing wrong before but now it works. Thank you very much!

It is still confusing when to use ContainerX/WidX/ReponsiveX and ui-fluid. You are saying that I should not use ContainerX etc for elements but only for layout (div,span etc) do I understand correctly? In Volt's documentation about ResponsiveX it says: "Makes an element responsive using media queries. " So element here means layout element? It is not very clear for this sentence.

In practice, if I have an input inside a panelGrid and my input is <p:inputText styleClass="Container100 Responsive100"> the input has width: 100% correctly (also if I use Wid100, the only difference I can see is that with Wid100 the box-sizing is speified to border-box). You say I should not us it like this and instead use ui-fluid class in a parent container?

I don't suppose you have a reference (a blog or forum post etc) which clarifies all these differences because for me personally it is not clear at all.

One last question. When you have ui-fluid, all your elements are 100%. How do you make one of them not have width 100%? Do you then use the ui-grid-col clases of Grid CSS in a parent container or is there an easier way?

Again thanks a lot for your help!

[mert.sincan]

You are saying that I should not use ContainerX etc for elements but only for layout (div,span etc) do I understand correctly?

- Yes. You must use ContainerX and ResponsiveX for only layout.

In Volt's documentation about ResponsiveX it says: "Makes an element responsive using media queries. " So element here means layout element?

- Yes. div,span etc. Exp;

Code: Select all

      <div class="Container100">
            <div class="Card ui-fluid">
                <div class="CardTopic">InputText - TextArea</div>
                <div class="SeparatorFull"></div>

                <div class="Container50 Responsive50">

                    <p:panelGrid columns="3" layout="grid" style="border:0px !important; background:none;" styleClass="ui-panelgrid-blank">
                        <p:inputText placeholder="Name"/>
                        <p:inputText placeholder="Email"/>
                        <p:inputText placeholder="Phone"/>
                        <p:inputText placeholder="Disabled Input" disabled="true"/>
                        <p:inputText placeholder="Address"/>
                        <p:inputText placeholder="Id"/>
                    </p:panelGrid>

                </div>

                <div class="Container50 Responsive50">

                    <p:inputTextarea rows="5" placeholder="Your Message" />

                </div>
            </div>
        </div>

You say I should not us it like this and instead use ui-fluid class in a parent container?

- Yes. You need to use ui-fluid class for responsive structure. (You can examine the above code) You must use ContainerX and ResponsiveX for only layout.
For components;
- WidX
- Visibilites, Floating And Width Settings on Devices
- Displaying
- Positioning
- Floating
- Overflows
- Text Aligning
- Font Sizes
- Font Weights
- Text Colors
- Borders
- Background Colors
You can use these classes and other classes for layout(div,span etc.).

Do you then use the ui-grid-col clases of Grid CSS in a parent container or is there an easier way?

- I think Grid Css is perfect solution. When we want to create responsive components in page, we usually use Grid Css. You can write inline css for component's width.
Exp;

Code: Select all

<div class="Container100 ui-fluid">
            <div class="ContainerIndent">
                <div class="Card ShadowEffect">
                    <h2 class="BigTopic">Form Elements</h2>

                    <p:panelGrid columns="4" columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4" layout="grid" styleClass="ui-panelgrid-blank" style="border:0px none; background-color:transparent;">
                        <p:outputLabel for="input" value="Input"/>
                        <p:inputText id="input"/>

                        <p:outputLabel for="area" value="Textarea"/>
                        <p:inputTextarea id="area"/>

                        <p:outputLabel for="calendar" value="Calendar"/>
                        <p:calendar id="calendar"/>
...

Please see;
<div class="Container100 ui-fluid">
AND
<p:panelGrid columns="4" columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4" layout="grid"
Demo; http://localhost:8084/rio/sample.xhtml