Alignment Issues with rendering a Input Text Field

Question

We have four tabs In all the tabs the first and the last name would be same But upon clicking the tab the thrid field changes as per the tab ID / rendering with the respective Ids.

The issue is with the third field, Upon clicking the tabs 2, 3 and 4 It is slightly moving away,

The tab 4 for Survey Comments has Input Area

How can I achieve the layout as shown below?

Expected Output

Tab 1

            First Name       [_________]                    Last Name [_________]

            Initial Pricing  [_________]

Tab 2

            First Name       [_________]                    Last Name [_________]

            Selling Price    [_________]

Tab 3

            First Name       [_________]                    Last Name [_________]

            Cost Price       [_________]

Tab 4

            First Name       [_________]                    Last Name [_________]

            Survey Comments  [_____________________]

Here is my entire Page Code x.html

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:pe="http://primefaces.org/ui/extensions">
    <style>
.borderClass {
    border-color: #DEEFFF;
    border-width: 2px;
    border-style: solid;
}
</style>
    <h:form>

        <p:panel id="form" styleClass="panelNoBorder">
            <p:fieldset toggleable="true" toggleSpeed="500" legend="Form">

                <p:panelGrid columns="4" styleClass="panelNoBorder">


                    <p:outputLabel value="First Name" />
                    <p:inputText id="FirstName" value="#{javaMB.FirstName}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>


                    <p:outputLabel value="Last Name" />
                    <p:inputText id="LastName" value="#{javaMB.LastName}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>

                    <p:outputLabel value="Initial Pricing"
                        rendered="#{typeMB.tabId eq 1}" />
                    <p:inputText id="InitialPricing" value="#{javaMB.InitialPricing}"
                        maxlength="10" style="width: 20%;" rendered="#{typeMB.tabId eq 1}">
                    </p:inputText>

                    <p:outputLabel value="Selling Price"
                        rendered="#{typeMB.tabId eq 2}" />
                    <p:inputText id="SellingPrice" value="#{javaMB.SellingPrice}"
                        maxlength="10" style="width: 20%;" rendered="#{typeMB.tabId eq 2}">
                    </p:inputText>

                    <p:outputLabel value="Cost Price" rendered="#{typeMB.tabId eq 3}" />
                    <p:inputText id="CostPrice" value="#{javaMB.CostPrice}"
                        maxlength="10" style="width: 20%;" rendered="#{typeMB.tabId eq 3}">
                    </p:inputText>

                    <p:outputLabel value="Survey Comments"
                        rendered="#{typeMB.tabId eq 4}" />
                    <p:inputTextarea id="SurveyComments"
                        value="#{javaMB.SurveyComments}" rows="10" cols="50"
                        style="width: 20%;" rendered="#{typeMB.tabId eq 4}">
                    </p:inputTextarea>
                </p:panelGrid>
            </p:fieldset>
        </p:panel>
    </h:form>
</ui:composition>

Database Table REF_Page_Type

CREATE TABLE PROD.REF_Page_Type
(
Page_TYPE_ID            Integer NOT NULL,
DISPLAY_NAME            VARCHAR2(50 BYTE) NOT NULL,
DESCRIPTION             VARCHAR2(200 BYTE)
);

Page_TYPE_ID   DISPLAY_NAME DESCRIPTION
1       Page 1      Page 1
2       Page 2      Page 2
3       Page 3      Page 3
4       Page 4      Page 4

typeMB.java

package blizzard.games.sec.entity;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.NamedQuery;
import javax.persistence.Table;

@Entity
@Table(name = "REF_Page_Type", schema = "PROD")
@NamedQuery(name = "RefPageType.findAll", query = "SELECT r FROM RefPageType 
r")
public class RefPageType implements Serializable {

private static final long serialVersionUID = 1L;

@Id
@Column(name = "Page_TYPE_ID")
private Integer pageTypeId;

@Column(name = "DISPLAY_NAME")
private String name;

@Column(name = "DESCRIPTION")
private String description;

public RefPageType() {
}

public RefPageType(Integer pageTypeId) {
    this.pageTypeId = pageTypeId;
}

public RefPageType(Integer pageTypeId, String name) {
    this.pageTypeId = pageTypeId;
    this.name = name;
}

public Integer getPageTypeId() {
    return pageTypeId;
}

public void setPageTypeId(Integer pageTypeId) {
    this.pageTypeId = pageTypeId;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public String getDescription() {
    return description;
}

public void setDescription(String description) {
    this.description = description;
}

javaMB.java

package blizzard.games.sec.managedbeans;

import blizzard.games.sec.RefPageType;

import java.awt.event.ActionListener;
import java.io.IOException;
import java.io.Serializable;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.HashSet;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;
import java.util.TreeMap;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.application.FacesMessage.Severity;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;
import org.apache.commons.lang3.StringUtils;
import org.primefaces.component.inputtext.InputText;
import org.primefaces.context.RequestContext;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.event.FlowEvent;
import org.primefaces.event.SelectEvent;
import org.primefaces.model.UploadedFile;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.jsf.FacesContextUtils;

@ManagedBean(name = "javaMB")
@ViewScoped
public class JavaMB  {

private static final long serialVersionUID = 1L;
private static final Logger logger = LoggerFactory
        .getLogger(JavaMB.class);

private String FirstName;
private String LastName;
private String InitialPricing;
private String SellingPrice;
private String CostPrice;
private String SurveyComments;


public String getFirstName() {
    return FirstName;
}
public void setFirstName(String firstName) {
    FirstName = firstName;
}
public String getLastName() {
    return LastName;
}
public void setLastName(String lastName) {
    LastName = lastName;
}
public String getInitialPricing() {
    return InitialPricing;
}
public void setInitialPricing(String initialPricing) {
    InitialPricing = initialPricing;
}
public String getSellingPrice() {
    return SellingPrice;
}
public void setSellingPrice(String sellingPrice) {
    SellingPrice = sellingPrice;
}
public String getCostPrice() {
    return CostPrice;
}
public void setCostPrice(String costPrice) {
    CostPrice = costPrice;
}
public String getSurveyComments() {
    return SurveyComments;
}
public void setSurveyComments(String surveyComments) {
    SurveyComments = surveyComments;
}
}

Actual Out Put / ISSUE

Tab 1

            First Name       [_________]                    Last Name [_________]

            Initial Pricing  [_________]

Tab 2

            First Name       [_________]                    Last Name [_________]

                        Selling Price    [_____________]

Tab 3

            First Name       [_________]                    Last Name [_________]

                                    Cost Price       [_________]

Tab 4

            First Name       [_________]                    Last Name [_________]

                                                Survey Comments            [_____________________]

What I have tried, Tried to place the third field in a column But it was way out of the expected output.

1: Please improve your title... 'issue' is waaaay to generic (every question in stackoverflow is an 'issue'. 2: please improve your xhtml. It contains errors. 3: [mcve], 4: post version info please — Kukeltje, Feb 07 '20 at 18:12
5: make sure you show borders and check what is the actual generated html — Kukeltje, Feb 07 '20 at 18:14
I cannot reproduce this in the sense that I have no clue how you re-use this piece of code in a [mcve]. Can you make it into a [mcve]? Oh and id attributes with spaces in them are invalid to my knowledge https://stackoverflow.com/questions/5972433/what-are-the-rules-for-a-jsf-id — Kukeltje, Feb 10 '20 at 19:02

WoAiNii · Accepted Answer · 2020-02-20T21:55:55.810

Since is missing almost everythig and most code is just wrong, i make a simple example that work for me, i addedd two buttons to switch between mode:

pom.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>

      <groupId>com.codenotfound</groupId>
      <artifactId>jsf-primefaces-hello-world</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      <packaging>jar</packaging>

      <name>jsf-primefaces-hello-world</name>
      <description>JSF PrimeFaces Hello World Example</description>
      <url>https://codenotfound.com/jsf-primefaces-example.html</url>

      <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.0.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
      </parent>

      <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <joinfaces.version>3.3.0-rc2</joinfaces.version>
      </properties>

      <dependencyManagement>
        <dependencies>
          <dependency>
            <groupId>org.joinfaces</groupId>
            <artifactId>joinfaces-dependencies</artifactId>
            <version>${joinfaces.version}</version>
            <type>pom</type>
            <scope>import</scope>
          </dependency>
        </dependencies>
      </dependencyManagement>

      <dependencies>
        <dependency>
          <groupId>org.joinfaces</groupId>
          <artifactId>primefaces-spring-boot-starter</artifactId>
        </dependency>
        <dependency>
          <groupId>javax.enterprise</groupId>
          <artifactId>cdi-api</artifactId>
        </dependency>
      </dependencies>

      <build>
        <plugins>
          <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
          </plugin>
        </plugins>
      </build>
    </project>

helloworld.xhtml

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

    <h:form>

        <p:panel id="form" styleClass="panelNoBorder">
            <p:fieldset toggleable="true" toggleSpeed="500" legend="Form">

                <p:panelGrid styleClass="panelNoBorder" style="width:100%">

                    <p:row>
                        <p:column style="width: 10%;">
                            <p:outputLabel value="First Name" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="FirstName" value="#{javaMB.firstName}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>


                        <p:column style="width: 10%;">
                            <p:outputLabel value="Last Name" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="LastName" value="#{javaMB.lastName}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>
                    </p:row>
                    <p:row rendered="#{javaMB.tabId eq 1}">
                        <p:column style="width: 10%;">
                            <p:outputLabel value="Initial Pricing" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="InitialPricing" value="#{javaMB.initialPricing}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>

                    </p:row>
                    <p:row rendered="#{javaMB.tabId eq 2}">
                        <p:column style="width: 10%;">
                            <p:outputLabel value="Selling Price" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="SellingPrice" value="#{javaMB.sellingPrice}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>

                    </p:row>
                    <p:row rendered="#{javaMB.tabId eq 3}">
                        <p:column style="width: 10%;">
                            <p:outputLabel value="Cost Price" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputText id="CostPrice" value="#{javaMB.costPrice}"
                                maxlength="10">
                            </p:inputText>
                        </p:column>

                    </p:row>
                    <p:row rendered="#{javaMB.tabId eq 4}">
                        <p:column style="width: 10%;">
                            <p:outputLabel value="Survey Comments" />
                        </p:column>
                        <p:column style="width: 40%;">
                            <p:inputTextarea id="SurveyComments"
                                value="#{javaMB.surveyComments}" rows="10" cols="50">
                            </p:inputTextarea>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            </p:fieldset>

            <p:commandButton value="Next" update="form">
                <f:setPropertyActionListener value="#{javaMB.tabId+1}"
                    target="#{javaMB.tabId}"></f:setPropertyActionListener>
            </p:commandButton>
            <p:commandButton value="Reset" update="form">
                <f:setPropertyActionListener value="1" target="#{javaMB.tabId}"></f:setPropertyActionListener>
            </p:commandButton>
        </p:panel>
    </h:form>
</ui:composition>

JavaMB

package blizzard.games.sec.managedbeans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@ManagedBean(name = "javaMB")
@ViewScoped
public class JavaMB {

    private static final long serialVersionUID = 1L;
    private static final Logger logger = LoggerFactory.getLogger(JavaMB.class);

    private String firstName;
    private String lastName;
    private String initialPricing;
    private String sellingPrice;
    private String costPrice;
    private String surveyComments;
    private int tabId = 1;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getInitialPricing() {
        return initialPricing;
    }

    public void setInitialPricing(String initialPricing) {
        this.initialPricing = initialPricing;
    }

    public String getSellingPrice() {
        return sellingPrice;
    }

    public void setSellingPrice(String sellingPrice) {
        this.sellingPrice = sellingPrice;
    }

    public String getCostPrice() {
        return costPrice;
    }

    public void setCostPrice(String costPrice) {
        this.costPrice = costPrice;
    }

    public String getSurveyComments() {
        return surveyComments;
    }

    public void setSurveyComments(String surveyComments) {
        this.surveyComments = surveyComments;
    }

    public int getTabId() {
        return tabId;
    }

    public void setTabId(int tabId) {
        this.tabId = tabId;
    }

}

Hello, Thank you for your response, But It produces the output like this which was resolved Name [_________] Last Name [_________] Initial Pricing [_____________________] https://stackoverflow.com/questions/60104885/ppanelgrid-layout-issue — pasha, Feb 08 '20 at 23:54
could you try merging the two answer (this layout with that inline style)? — WoAiNii, Feb 09 '20 at 10:10
Tried to combine both Resulted in giving not the expected Outt put ...same like .......... Name [_________] Last Name [_________] Initial Pricing [_____________________] — pasha, Feb 20 '20 at 01:43

Alignment Issues with rendering a Input Text Field

1 Answers1