p:咆哮的定制定位

Question

p:咆哮的定制定位

我正在使用<p:growl>PrimeFaces 3.2的组件来显示面部消息.我想自定义它的位置,使其显示在左侧而不是右侧.

我尝试了以下方法:

<h:head>
    <title>Facelet Title</title>
    <style type="text/css">
        .ui-growl {
            position:absolute;
            top:20px;
            left:20px;
            width:301px;
            z-index:9999;
        }
    </style>
</h:head>
<h:body>
    <h:form id="frm">
        <div id="add">
            <p:growl id="growl" showDetail="true" sticky="true" autoUpdate="true"/>
            <h:panelGrid columns="2" >
            ...

Run Code Online (Sandbox Code Playgroud)

但它没有用.我哪里错了？

Answer 1

Mat*_*ndy 4

你的代码看起来不错。

我将其复制到我的测试用例中并且它有效：咆哮元素显示在左上角。为此，只有left:20px;必要的（感谢@BalusC 的评论）。

所以问题一定出在其他地方。您的页面是否有在示例中省略的其他样式定义？尝试通过删除所有不必要的内容来隔离问题。

这是我的测试用例：

<!DOCTYPE html>
<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:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
        <style type="text/css">
            .ui-growl{
                left:20px;
            }
        </style>
    </h:head>

    <h:body>
        <h:form id="myform">
            <div id="add">
                <p:growl showDetail="true" sticky="true" autoUpdate="true"/>
            </div>
        </h:form>
    </h:body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，3 月前
查看次数：	11014 次
最近记录：	8 年，8 月前