p:dialog formatting

[grburgos]

Getting reacquainted with all the updates. I'm trying to get a dialog show 3 columns in row one and then on row 2 a dataTable to stretch to the size of the 3 columns from row one. I don't want to hardcode width on the dialog to ensure it looks right because if I do and change the view to a small screen it will no longer be responsive. If I change the datatable to a different component say another inputtext the format loads correctly. What I'm I missing in the class from primeflex to make it work in Pandora?

Code: Select all

<p:dialog header="Add Materials" showEffect="fade" hideEffect="fade" modal="true" 
                                      widgetVar="searchMaterialDialog" responsive="true">
                                <p:outputPanel id="manage-Material-content" >   
                                    <div class="p-formgrid p-grid">
                                        <div class="p-field p-col-9 p-md-3">
                                            <p:outputLabel for="materialType">Material type</p:outputLabel>
                                            <p:selectOneMenu id="materialType" required="true" value="#{recipeViewer.materialType}" converter="materialtypeConverter"
                                                             filter="true" filterMatchMode="startsWith" >
                                                <f:selectItems itemLabel="#{materialType.materialTypeName}" itemValue="#{materialType}"
                                                               value="#{recipeViewer.materialTypes}" var="materialType"/>
                                            </p:selectOneMenu>
                                        </div>
                                        <div class="p-field p-col-9 p-md-3">
                                            <p:outputLabel for="name">Material name</p:outputLabel>
                                            <p:inputText id="name" value="#{recipeViewer.materialName}" required="true" />
                                        </div>
                                        <div class="p-field p-col-9 p-md-3">
                                            <p:outputLabel for="unitType">Unit type</p:outputLabel>
                                            <p:selectOneMenu id="unitType" required="true" value="#{recipeViewer.unitType}" converter="unitypeConverter"
                                                             filter="true" filterMatchMode="startsWith" >
                                                <f:selectItems var="unitType" itemLabel="#{unitType.unitTypeName}" itemValue="#{unitType}"
                                                               value="#{recipeViewer.unitTypes}"/>
                                            </p:selectOneMenu>
                                        </div>
                                        <div class="p-field p-col-9" >
                                            <p:dataTable id="dt-material" widgetVar="dtMaterials" var="material" value="#{materialView.materials}" 
                                                         selection="#{materialView.selectedMaterials}" rowKey="#{material.materialId}" 
                                                         rows="5" paginator="true" selectionMode="single" >
                                                <f:facet name="header" >
                                                    <div class="products-table-header">
                                                        <span style="font-weight: bold">Select Materials</span>                                                
                                                    </div>
                                                </f:facet>

                                                <p:column headerText="Material name" sortBy="#{material.materialName}" >
                                                    <h:outputText value="#{material.materialName}" />
                                                </p:column>
                                                <p:column headerText="Material type" sortBy="#{material.materialtype.materialTypeName}" >
                                                    <h:outputText value="#{material.materialtype.materialTypeName}" />
                                                </p:column>
                                                <p:column headerText="Unit quantity" sortBy="#{material.unitsCount}" >
                                                    <h:outputText value="#{material.unitsCount} #{material.unitType.unitTypeName}" />
                                                </p:column>                           
                                                <p:column headerText="Bulk cost" sortBy="#{material.bulkCost}" >
                                                    <h:outputText value="#{material.bulkCost}" >
                                                        <f:convertNumber currencySymbol="$" type="currency" />
                                                    </h:outputText>
                                                </p:column>
                                                <p:column headerText="Cost per unit" sortBy="#{material.costPerUnit}" >
                                                    <h:outputText value="#{material.costPerUnit}" style="font-weight: 700">
                                                        <f:convertNumber currencySymbol="$" type="currency" />
                                                    </h:outputText>
                                                </p:column>

                                            </p:dataTable>
                                        </div>
                                    </div>
                                </p:outputPanel>

                                <f:facet name="footer">
                                    <p:commandButton value="Save" icon="pi pi-check" onclick="PF('searchMaterialDialog').hide()" update="manage-Material-content" process="manage-Material-content @this" />
                                    <p:commandButton value="Cancel" icon="pi pi-times" onclick="PF('searchMaterialDialog').hide()" class="ui-button-secondary" />
                                </f:facet>
                            </p:dialog> 
                      

[grburgos]

After reading a little more thorough the documentation I realized the structure is 12 slots per row. Thus having 3 columns of size 3 = 9. Having 3 columns of size 4 fixes the first row and pushes the second row (datatable) to take the full 12 column space. I'm ok with this approach. Now I need to figure out how to handle the mobile experience on the dialog.

My guess is large dialogs should be avoided for mobile. The data should be divided or presented in a more concise manner. Any suggestions? Building a search screen that allows the user to use 3 search criteria and loads these values in the datatable below. Allowing the end user to select the one item from the datatable.

[mert.sincan]

Yes, the sum of the values in the column must be 12. You have to adjust the content of the dialog according to your needs. Maybe, our documentation can help to you;
https://www.primefaces.org/showcase/pri ... grid.xhtml

Best Regards,