イメージをテーブルセルにテキストでインラインで表示するにはどうすればいいですか？

Question

私は、ICEfaces 1.8を使ってJSF 1.2データテーブルを持っています。ある列では、バッキングビーンのテキストを表示し、その右に新しい行に折り返さずに同じ行に小さなイメージを表示したいと考えています。

画像は実際には画像属性が設定されたice:commandButtonコンポーネントです。画像をクリックすると、ice:panelPopupのパネルが表示されます。ここで

のdataTable内の列の関連するコードです：

<ice:column id="col1"> 
    <ice:outputText escape="false" value="#{document.column1Value}" /> 
    <ice:form> 
     <ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif"> 
      <f:attribute name="docParam" value="#{document.parameter}" />       
     </ice:commandButton> 
     ... 
    </ice:form> 
</ice:column> 

私はwhite-space:nowrapとfloatを含め、様々なタグにCSSスタイル情報を追加することのすべての種類を試してみましたが、所望の効果を得ることができませんでした。

Answer 1

<ice:form>は、デフォルトではblock level elementあるHTML <form>を生成し、それは常に新しい行から始まります。 <form>のスタイルをdisplay: inlineに設定する必要があります。

<ice:form style="display: inline;"> 

また、そのテキストをフォームに移動することもできます。

<ice:form> 
    <ice:outputText escape="false" value="#{document.column1Value}"/> 
    <ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif"> 
     <f:attribute name="docParam" value="#{document.parameter}" />       
    </ice:commandButton> 
    ... 
</ice:form> 

いずれかの方法で、あなただけの、まだ、セルの幅に残って少し余裕があるとき空白で包まれているから、セルの内容を阻止する必要があります。両方の要素の共通の親要素にwhite-space: nowrapを設定することで実現できます。最初のアプローチ（フォームをdisplay: inlineに設定）の場合、それは<td>エレメントになり、2番目のアプローチ（同じフォーム内にテキストを置く）の場合は、<form>エレメントになります。例えば。

<ice:form style="white-space: nowrap;"> 
    <ice:outputText escape="false" value="#{document.column1Value}"/> 
    <ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif"> 
     <f:attribute name="docParam" value="#{document.parameter}" />       
    </ice:commandButton> 
    ... 
</ice:form>