rich:calendar icon not displaying on same line as display box

Answer 1

Solution:

There was a general css setup for the image html tag.

img {
    display: block;
}

Since the rich calendar is made of an input and an image they were displayed in the block form, which put the two on different lines.

I could not just take out the line of css, because it would have ill effects on the rest of the web application. So, it had to be overridden with the following code css code.

img.rich-calendar-button {
    display: inline;
}

However, this now puts all four elements on the one line. To fix this you need to block the entire rich calendar like so.

<h:panelGroup>
    <fieldset>
       <legend>Date Submitted</legend>
       <a4j:outputPanel layout="block">
           <rich:calendar value="#{TicketSearchBean.start_dateSubmitted}" />
       </a4j:outputPanel>
        <a4j:outputPanel layout="block">
            <rich:calendar value="#{TicketSearchBean.end_dateSubmitted}" />
        </a4j:outputPanel>
    </fieldset>
</h:panelGroup>

Better Solution: Don't set css on generic html tags. If you want to set special css on something create a class for it.