Question

我遇到了来自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>

如何放大盒子？

Answer 1

这对我有用：

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

Answer 2

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

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

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。

MultiSelectListbox样式不能使用primefaces

2 个答案: