5

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

しかし、うまくいきませんでした。どこが間違っていたのですか？

4

2 に答える 2

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>
于 2012-05-18T11:37:43.387 に答える
2 
function growlLeft(){

                var css = document.createElement("style");
                css.id="growlStyle";
                css.type = "text/css";
                css.innerHTML = ".ui-growl { left: 20px!important}";
                document.body.appendChild(css);
            }
            function growlReset(){
                $('#growlStyle').empty();
            }

このコードは、growl を動的に配置し、その位置をリセットするのに役立ちます。また、スタイルクラスは問題を解決します

                 .ui-growl { left: 20px}
于 2013-09-10T08:00:39.303 に答える