Question

我正在使用PrimeFaces组件，并且注意到咆哮组件的默认宽度不足以容纳我在其中列出的文件名。我增加了咆哮声组件的宽度，但文本似乎并未与新的宽度重新对齐。

我的CSS知识非常有限，并且只尝试使用左填充和文本对齐方式，但这两种方法都无效。

要调整此属性，我需要查看什么属性？

这是带有组件和生成的html的圆圈的图片。

mystyle.css

select  max(value) as valmax,
        min(value) as valmin
from mytable

main.xhtml

.ui-clock, .ui-fileupload-buttonbar, .ui-fileupload-content, .ui-widget-content{
    background-color: white;
    border: white;
}

.ui-growl {
    width: 600px;
    left-padding: 0px;
}

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

UploadBean.java

<!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>

Answer 1

我弄清楚了如何在CSS中设置断点，并找到了在咆哮消失之前需要修改的真正元素。调整ui-growl类的宽度后，我不得不修改ui-growl-message类以增加宽度并向左调整float。

这就是我添加到CSS中的内容

span.progress {
    display: inline-block;
    width: 12rem;    /* optional */
}

删除Primefaces组件上的左填充

1 个答案: