css - 修改文本框宽度以显示xhtml primefaces中的所有数据

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>

您必须在样式类中使用 min-width 而不是 width。

但是如果内容小于当前大小，它也会变小。如果你不想，你可以使用类似的东西

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

应选择值(上面的 10)，使其与样式类中的最小宽度相匹配。

否则你可以给它一个标题:

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

这将在鼠标悬停时显示。

你也可以给它一个p:tooltip:

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

差不多吧。