Remove left padding on Primefaces Component

Question

I am working with PrimeFaces components and noticed that the default width of the growl component was not large enough to fit the filenames that I list in it. I increased the width of the growl component but the text does not seem to realign with the new width.

My CSS knowledge is extremely limited and have only tried playing with left-padding and text-align, both of which had no effect.

What attribute would I need to look at to go about adjusting this?

Here's a picture with the component and the generated html circled.

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

Possible duplicate of [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) — Jasper de Vries, Oct 24 '18 at 17:51
Can you give us a snippet of working code with how you're trying to access the component via css, etc.? — kcvan, Oct 24 '18 at 17:52
@JasperdeVries No I know how to overload the primefaces styling I just don't know the attribute to use. — Ras, Oct 24 '18 at 18:01
Start by removing the the `h:head` in the included file, the `h:body` in the define in it and prehistoric `` tag. Still problems then? And do you have the same problem without a layout? If not, it was not a [mcve] — Kukeltje, Oct 24 '18 at 18:48
@Kukeltje thanks I took those things out. I solved the issue in my css and posted the answer below. You're a PF guru so I was wondering if that is the right way to go about fixing this issue or if I even needed to modify the css at all. Is this something that PF normally handles by itself? — Ras, Oct 24 '18 at 19:34

score 0 · Accepted Answer · answered Oct 24 '18 at 18:41

I figured out how to set break points in the css and found the true element I needed to modify before the growl vanished. After adjusting the width of the ui-growl class I had to modify the ui-growl-message class to increase the width and adjust float to left.

This is what I added to my css

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

Remove left padding on Primefaces Component

1 Answers1