css - 呈现输入文本字段的对齐问题
问题描述
我们有四个选项卡在所有选项卡中,名字和姓氏相同但是在单击选项卡时,第三个字段会根据选项卡 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
类型MB.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 [_____________________]
我已经尝试过,尝试将第三个字段放在列中,但这超出了预期的输出。
解决方案
由于几乎缺少所有内容并且大多数代码都是错误的,因此我做了一个对我有用的简单示例,我添加了两个按钮来切换模式:
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;
}
}
推荐阅读
- javascript - 如何将默认值设置为来自前缀或输入字段的状态
- mysql - 在 MySQL 工作台的 EER 图中,我在哪里设置外键约束名称?
- python - 给定 3d 张量时,argmax 如何工作 - tensorflow
- java - 有没有办法阻止在另一个 Android 应用程序中显示密码功能?
- javascript - 如果使用 jquery 在密码框中键入了某些内容,则显示和隐藏确认密码框
- r - 减小上标字体大小ggplot2 R
- django - 在网页上显示 Django 外键
- shiro - 我们可以使用 Apache Shiro 与 Angular 8
- dynamic-programming - 我无法理解 o(sum) 空间复杂度中硬币兑换问题的逻辑
- android - 如何在 kotlin 1.4 中使用视图绑定