Text & Image Layout in JSF

Question

Hi i am trying to make image and text display at same line by using JSF tag. is there any way to do that? oringinal code is like following but image and text always displays in 2 lines.

    <rich:modalPanel id="Busy" autosized="true" zindex="2000">
        <h:outputText value="Submitting..."></h:outputText>
        <h:graphicImage value="images/loading.gif" />
    </rich:modalPanel>

Answer 1

The best solution is to define the line directly in the CSS properties:

<h:outputText value="Submitting..." styleClass="loading"/>

and in your CSS:

.loading {
    background-image: url('images/loading.gif');
}

then, you will have to adapt your CSS class to display correctly your image.

Answer 2

You can try this

<rich:modalPanel id="Busy" autosized="true" zindex="2000">
   <h:panelGrid columns="2">
      <h:outputText value="Submitting..."></h:outputText>
      <h:graphicImage value="images/loading.gif" />
   </h:panelGrid>
</rich:modalPanel>

The will arrange all its child elements in a table, containing the specified number of columns (2 in this case).

h:panelGrid