rich：カレンダーアイコンが表示ボックスと同じ行に表示されない

Question

Java Server FacesとFaceletsを使用するJavaベースのWebアプリケーションがあります。

richfaces calendarを使用して期間を入力しています。

ここにウェブページ上のコードがあります。

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

ここにFirefoxでの結果があります。

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

だから、私の問題は、アイコンが次の行にしていないディスプレイボックスと同じ行にあるということです。

Answer 1

ソリューション：

画像htmlタグのための一般的なCSSの設定がありました。リッチカレンダー入力、それらは異なるライン上の2つを入れてブロック状に表示された画像からなるので

img { 
    display: block; 
} 

。

ウェブアプリケーションの残りの部分に悪影響を及ぼすため、私はcssの行を取り出すことができませんでした。したがって、次のコードのCSSコードでオーバーライドする必要がありました。

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

ただし、これで4つの要素がすべて1行に表示されるようになりました。これを修正するには、豊富なカレンダー全体をブロックする必要があります。

<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> 

よりよい解決策：は、一般的なHTMLタグのCSSを設定しないでください。何かに特別なCSSを設定したい場合は、そのクラスを作成します。