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

Question

I have a Java based web-application using Java Server Faces and Facelets.

I am inputting a date range using the richfaces calendar.

Here is the code on the web-page.

<h:panelGroup>
    <fieldset>
        <legend>Date Submitted</legend>
        <rich:calendar value="#{SearchBean.start_dateSubmitted}" />
        <rich:calendar value="#{SearchBean.end_dateSubmitted}" />
    </fieldset>
</h:panelGroup>

Here are the results in Firefox.

alt text http://img16.imageshack.us/img16/3717/richcalendar.png

So, my problem is that the icon is on the next line and not on the same line as the 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.