【发布时间】：2025-12-13 20:55:02
【问题描述】：
我们有四个标签 在所有选项卡中，名字和姓氏都相同 但是在单击选项卡时，第三个字段会根据选项卡 ID/使用相应的 ID 呈现而发生变化。
问题在于第三个字段，单击选项卡 2、3 和 4 后，它会稍微移开，
调查评论的选项卡 4 具有输入区域
如何实现如下布局？
预期输出
标签 1
First Name [_________] Last Name [_________]
Initial Pricing [_________]
标签 2
First Name [_________] Last Name [_________]
Selling Price [_________]
标签 3
First Name [_________] Last Name [_________]
Cost Price [_________]
标签 4
First Name [_________] Last Name [_________]
Survey Comments [_____________________]
这是我的整个页面代码 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>
数据库表 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;
}
}
实际输出/问题
标签 1
First Name [_________] Last Name [_________]
Initial Pricing [_________]
标签 2
First Name [_________] Last Name [_________]
Selling Price [_____________]
标签 3
First Name [_________] Last Name [_________]
Cost Price [_________]
标签 4
First Name [_________] Last Name [_________]
Survey Comments [_____________________]
我已经尝试过，尝试将第三个字段放在列中但它超出了预期的输出。
【问题讨论】：
-
1：请改进您的标题...“问题”是通用的（* 中的每个问题都是“问题”。2：请改进您的 xhtml。它包含错误。3：@987654321 @, 4: 请发布版本信息
-
5：确保显示边框并检查实际生成的 html 是什么
-
我无法重现这一点，因为我不知道您如何在 minimal reproducible example 中重复使用这段代码。你能把它变成minimal reproducible example吗？哦，据我所知，带有空格的 id 属性无效*.com/questions/5972433/…
-
添加了可重现的代码
标签： css jsf primefaces