MultiSelectListbox 样式在使用 primefaces 时不起作用答案

【问题标题】：MultiSelectListbox style does not work using primefacesMultiSelectListbox 样式在使用 primefaces 时不起作用
【发布时间】：2016-06-22 05:16:33
【问题描述】：

我遇到了来自 PrimeFaces 的 MultiSelectListbox 的问题。我在我的应用程序中实现了它并用数据填充了它。但是现在它显示的数据非常糟糕。正如您在下图中看到的那样，我的数据包含长字符串，并且框没有展开。我必须添加滚动条，这看起来不太好。

我尝试使用 PrimeFaces 中的 style 属性，但我可以填写我想要的，它不会改变任何东西，即使我填写 width:1000px。

这是我的代码：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Neuen Eintrag hinzufügen</title>

    </h:head>
    <h:form>

    <p:multiSelectListbox value="#{eintragHinzufuegen.selection}" style="width:200%" effect="slide" header="Kategorien" showHeaders="true" >
        <f:selectItems value="#{eintragHinzufuegen.categories}" style="width:200%" />
    </p:multiSelectListbox>

    <p:commandButton value="Save" icon="ui-icon-check" update="out" style="display:block;margin:10px 0" />

    <h:outputText id="out" value="Value: #{eintragHinzufuegen.selection}" style="display:block" />
    </h:form>
</html>

如何放大盒子？

【问题讨论】：

您是否尝试使用浏览器的开发人员工具对其进行实时更改？在那里你可以看到是什么设置了盒子的大小。
PF 版本？尝试使用 CSS 吗？
@Kukeltje 我正在使用 PF 5.2。直接 CSS 不起作用。 @Lule 它显示了我在 xhtml <div id="j_id_6:j_id_7" class="ui-multiselectlistbox ui-widget ui-helper-clearfix" style="width:200%"> 中输入的内容
width:200% 是错误的...

标签： css jsf jsf-2 primefaces

【解决方案1】：

如果您将multiSelectListbox 元素保持在柱状（并排）布局中，则您会受到可用水平视口空间的限制。这是对元素宽度及其各自文本的限制。

首先，您应该从multiSelectListbox 和selectItems 元素中删除width: 200%;。

CSS，无论是内联的，还是通过样式表，都应该有所帮助。

对于multiSelectListbox 元素，本质上是<select> 元素，一些样式可以帮助统一：

select {
  height: 100px;    /* sets a uniform height */
  overflow: scroll; /* the character length of options necessitates this,
                       unless you choose to limit the width of the options */
  width: 24%;       /* sets a uniform height */
}

option {
  font-size: 12px;  /* or smaller, if needed */
}

如果您需要在 HTML 中设置这些样式，您可以试试这个（为简洁起见，仅显示 style 属性）：

<p:multiSelectListbox style=“height: 100px; overflow:scroll; width:24%;“>
    <f:selectItems style=“font-size: 12px;” />
</p:multiSelectListbox>

对于每个multiSelectListbox的标题，如果可能的话，可以限制标题显示的高度和宽度：

.header {
  background: green;
  color: white;
  display: inline-block;
  overflow: hidden;
  line-height: 30px;
  padding: 1% 2%;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 20%;
}

我创建了一个Codepen example to demonstrate。

【讨论】：

【解决方案2】：

这对我有用：

.ui-selectonelistbox, .ui-selectmanymenu,.ui-multiselectlistbox-listcontainer{
    width:200px !important;
}

【讨论】：

如果您可以添加代码sn-p的描述/解释会更有帮助。