删除 Primefaces 组件上的左填充

Question

我正在使用 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;
}

main.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>

index.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>

UploadBean.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);
    }
}

Answer 1

我想出了如何在 css 中设置断点并找到了在咆哮声消失之前我需要修改的真实元素。调整 ui-growl class 的宽度后，我不得不修改 ui-growl-message class 以增加宽度并将浮动调整到左侧。

这是我添加到 css

中的内容

.ui-growl-message {
    padding: 0px 0 5px 20px;
    width: 400px;
    float: left;
}

删除 Primefaces 组件上的左填充

Remove left padding on Primefaces Component

css

primefaces