我在使用 PrimeFaces 组件时注意到 growl 组件的默认宽度不够大，无法容纳我在其中列出的文件名。我增加了咆哮组件的宽度，但文本似乎没有与新宽度重新对齐。
我的 CSS 知识非常有限，只尝试过左填充和文本对齐，但都没有效果。
我需要查看什么属性才能进行调整？
这是一张图片，其中圈出了组件和生成的 html。
mystyle.css
.ui-clock, .ui-fileupload-buttonbar, .ui-fileupload-content, .ui-widget-content{
background-color: white;
border: white;
}
.ui-growl {
width: 600px;
left-padding: 0px;
}
主.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<meta http-equiv="refresh"
content="#{session.maxInactiveInterval};url=index.xhtml" />
<f:view contentType="text/html">
<h:head>
<title>My Title</title>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/aristo/mystyle.css"/>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="center">
<ui:insert name="pagebody" />
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
索引.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" template="/templates/main.xhtml">
<ui:define name="pagebody">
<h:body>
<h:form id="uploadform" enctype="multipart/form-data">
<center>
<p:fileUpload fileUploadListener="#{uploadBean.handleFileUpload}" mode="advanced"
allowTypes="/(\.|\/)(csv)$/" update="messages"/>
<p:growl id="messages" showDetail="true" />
</center>
</h:form>
</h:body>
</ui:define>
</ui:composition>
上传Bean.java
@RequestScoped
@ManagedBean(name = "uploadBean")
public class UploadBean implements java.io.Serializable {
private static final long serialVersionUID = 1L;
private File file = null;
@PostConstruct
public void init() {
}
public void handleFileUpload(FileUploadEvent event){
FacesMessage message = new FacesMessage("Upload Failed", "my message");
FacesContext.getCurrentInstance().addMessage(null, message);
}
}
最佳答案
我想出了如何在 css 中设置断点，并在咆哮消失之前找到了我需要修改的真正元素。调整 ui-growl 类的宽度后，我不得不修改 ui-growl-message 类以增加宽度并将 float 调整到左侧。
这是我添加到我的 css 中的内容
.ui-growl-message {
padding: 0px 0 5px 20px;
width: 400px;
float: left;
}
关于css - 删除 Primefaces 组件上的左填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52975178/