4

私たちのフォームでは、 や などの他のウィジェットに比べて入力フィールドと が広すぎることに気付きp:inputTextましp:inputTextareaた。フォームは ap:panelGrid で囲まれています。p:select*p:commandButton

テストページは次のとおりです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>
            D E B U G
        </title>
    </h:head>

    <h:body>

        <h:form>

            <p:panelGrid columns="2">

                <p:outputLabel value="ID:" />
                <p:inputText style="width: 100%;" />

                <h:outputText />
                <p:commandButton value="all = width: 100%" style="width: 100%;" />

                <p:outputLabel value="Status:" />
                <p:selectOneMenu style="width: 100%;">
                    <f:selectItem itemLabel="Status A" itemValue="1" />
                    <f:selectItem itemLabel="Status B" itemValue="2" />
                    <f:selectItem itemLabel="Status C" itemValue="3" />
                </p:selectOneMenu>

                <p:outputLabel value="Remarks:" />
                <p:inputTextarea rows="6" style="width: 100%;" />

            </p:panelGrid>

            <br />

            <p:panelGrid columns="2">

                <p:outputLabel value="ID:" />
                <p:inputText style="width: 300px;" />

                <h:outputText />
                <p:commandButton value="all = width: 300px" style="width: 300px;" />

                <p:outputLabel value="Status:" />
                <p:selectOneMenu style="width: 300px;">
                    <f:selectItem itemLabel="Status A" itemValue="1" />
                    <f:selectItem itemLabel="Status B" itemValue="2" />
                    <f:selectItem itemLabel="Status C" itemValue="3" />
                </p:selectOneMenu>

                <p:outputLabel value="Remarks:" />
                <p:inputTextarea rows="6" style="width: 300px;" />

            </p:panelGrid>
        </h:form>        

    </h:body>

</html>

Firefox では次のように表示されます。

ここに画像の説明を入力

IE 9 (IE 8 モード) では次のようになります。

ここに画像の説明を入力

パーセンテージ widths<p:inputText style="width: 100%;" /> では、コンポーネントのレンダリングが少し広すぎます。同じことが絶対幅にも当てはまるようです<p:inputText style="width: 300px;" />。

PrimeFaces CSS には付属していることがわかりました

.ui-inputfield {
    font-weight: normal;
    margin: 0;
    outline: medium none;
    padding: 4px;
}

、パディングを削除すると正しい幅になります。ただし、パディングは入力のテキスト インセット用です。CSS セレクターのオーバーライドは実際には機能しません。

質問:

とをどのように修正しますp:inputTextかp:inputText? これをどのように調整するのが最善ですか？カスタムの PrimeFaces レンダラーを使用していますか?

補遺:

ソースを調べましたが、これを変更できる場所（InputRendererクラス？）が見つかりませんでした。どこを見るべきかについてのヒントは大歓迎です（コメントで！）。

コンポーネントが正しいサイズを示しているように見えることに注意してくださいp:calendar(ただし、パーセンテージ幅のみ)。PrimeFaces には問題があるようです。

4

2 に答える 2

1

これは正常な動作です。その理由はすでにわかっています。選択したテーマのパディングのため。

だからあなたはできる：

  • コンポーネントの幅を適切に調整します。inputText には 296px、selectOneMenu には 304px など、必要に応じて使用してください
  • 特定のセクションの CSS スタイルをオーバーライドします。特定のコンテキストで特定のクラスのスタイルをオーバーライドする方法を見つけてください。
  • 特定のニーズがあるため、最適なソリューション:現在のテーマに基づいて独自のテーマを作成します(PrimeFaces ドキュメント セクション 7)。
于 2013-01-11T10:06:44.670 に答える
0

primefaces スタイルシートの後で、パディングやその他のスタイルをオーバーライドできます。通常、これはインライン / <h:body> の直後にスタイルシートを含めることを意味します。

.ui-inputfield {
    padding: 0;
}
于 2013-09-26T07:03:54.023 に答える