xhtmlのすべてのデータを表示するようにテキストボックスの幅を変更する

Question

テーブルのデータを自動入力する形式の読み取り専用テキストボックスがあります。

<p:inputText value="#{ManagedBean.var}" styleClass="textbox" id="varDetails" maxlength="200"></p:inputText> 

一部のエントリは、テキストボックスの幅を超えているため完全に表示されません。 Onmouseoverコマンドを使用してテキストボックスの幅を動的に変更するにはどうすればよいですか？

Answer 1

これは動作するようです：

<h:form> 
    <p:inputText ... 
       onmouseover="$(this).attr('size', this.value.length)" 
       onmouseout="$(this).attr('size', '')" /> 
</h:form> 

あなたはstyleClassの中min-widthなくwidthを使用する必要があると思います。

しかし、コンテンツのサイズが現在のサイズよりも小さい場合、サイズも小さくなります。あなたは

onmouseover="if (this.value.length > 10) $(this).attr('size', this.value.length)" 

のようなものの値（上記10）を使用できることをしたくない場合は、styleClassの中で最小幅と一致するように選択しなければなりません。

そうでない場合、あなたはそれを与えることができるタイトル：

<p:inputText ... value="#{ManagedBean.var}" title="#{ManagedBean.var}" /> 

のonmouseover表示されます。

また、それにp:tooltipを与えることができる：多かれ少なかれ同じだ

<p:tooltip for="varDetails" value="#{ManagedBean.var}" /> 

。