1

It's a simple question, is it possible to give style to the component p:fragment?

There aren't any style/styleClass/class attributes for p:fragment specified in the documents (5.0) (although my IDE suggests me to use class based on the library but it doesn't work).

Basically what I want to do is to change the display to:

display: inline;

Because by default the component is rendered as a div with display: block;

I know I could use the id attribute and give it some style, but I don't want this solution because I have multiple fragments and it would be quite ugly.

mrganser
  • 1,113
  • 1
  • 13
  • 27

2 Answers2

1

You can specific your css like my example

        <style>
            div[id$="-fragment"]{
                background-color: red;
            }
        </style>
        <h:form>                
            <h:panelGrid columns="2" cellpadding="5">
                <p:outputLabel for="ignored" value="Required" />
                <p:inputText id="ignored" required="true" />
            </h:panelGrid>

            <p:fragment autoUpdate="true" id="first-fragment">
                <h:panelGrid columns="4" cellpadding="5">
                    <p:outputLabel for="txt" value="Text Value:" />
                    <p:inputText id="txt" value="#{basicView.text}" />
                    <p:commandButton value="Submit"/>
                    <h:outputText value="#{basicView.text}" />
                </h:panelGrid>
            </p:fragment>
            <p:fragment autoUpdate="true" id="second-fragment">
                <h:panelGrid columns="4" cellpadding="5">
                    <p:outputLabel for="txt2" value="Text Value:" />
                    <p:inputText id="txt2" value="#{basicView.text}" />
                    <p:commandButton value="Submit"/>
                    <h:outputText value="#{basicView.text}" />
                </h:panelGrid>
            </p:fragment>
        </h:form>

Hope this help.

wittakarn
  • 3,124
  • 1
  • 18
  • 31
  • I'll do this!. I think it's probably the best approach since the lack of fragment attributes. Thanks! – mrganser Sep 24 '14 at 06:18
0

Primefaces' fragment component is used to define automatic partially process and update sections whenever ajax request is triggered by a descendant component, it is not a component to display/style content.

If you do not need the automatic processing functionality, use facelet's ui:fragment component for your rendering needs and place its content in a div, which you can style however you want.

Hello
<ui:fragment>
    <div style="display: inline;">Hello</div>
</ui:fragment>
Hello
Yannick
  • 184
  • 1
  • 3
  • 10
  • 1
    @mrganser Try using Primefaces' `outputPanel`, it has the `style` and `styleClass` attributes. – Yannick Sep 23 '14 at 15:26
  • Mmm yeah, I know I can do it with that, but I am using fragment to make some kind of "mini-forms" inside a big form, like in the [showcase](http://www.primefaces.org/showcase/ui/ajax/fragment.xhtml), which, by the way, I just achieve by deleting the fragment and validate the fields depending on the button [ref](http://stackoverflow.com/questions/8370675/how-to-let-validation-depend-on-the-pressed-button). But anyway, I think with fragments was more clear and the initial question remains... – mrganser Sep 23 '14 at 18:32