如何在 PrimeFaces 中设置 OrderList 宽度答案

【问题标题】：How to set OrderList width in PrimeFaces如何在 PrimeFaces 中设置 OrderList 宽度
【发布时间】：2013-09-17 13:26:04
【问题描述】：

如何在 Primefaces 中更改 ListOrder 的宽度？

我尝试了宽度或样式，但它并不想要我想要的。它通过滚动保持很小：

你有什么想法吗？

我尝试过使用 css：

    .orderlist {
        width:1000px;
    }

和 p:orderList styleClass="orderlist" ...

这样做，我的页面更大，但包含数据的区域（并且可滚动列表仍然很小。

【问题讨论】：

我尝试了宽度或样式，但它不想要我想要的那你想要什么？为此，您必须使用 primefaces 特定的 CSS。
你的意思是styleClass和css？我也试过了。
那么请贴出您尝试过什么以及为什么说它不想要我想要的。
你好@user1667910：我认为你正面临这个问题是由于.ui-widget-content styleClass 的固定宽度。你可以试试这个.ui-widget-content{width: 5000000px;}。
您好，Diganta，感谢您的帮助。如果我这样做，其他组件会更大，但不是这个。

标签： css jsf primefaces

【解决方案1】：

以下 CSS 适合我：

.ui-orderlist-list {
    width:300px;
}

【讨论】：

是的，它占据了更多的位置，但是带有列的列表保持较小的滚动条。你不也一样吗=？
我不明白你在做什么。你是什么意思列保持小滚动条？如果你想看看我的样子，请尝试转到this site 并进入控制台并输入$('.ui-orderlist-list').css('width', '100px')
primefaces 的例子和我的完全一样。但我有更多的数据/列要显示。因此，它太小了。到目前为止，我一直在使用 dataTable，但我希望能够使用拖放重新排序项目。
在<p:column> 上，尝试将宽度设置为 100%。所以<p:column style="width:100%">
我仍然不清楚您的问题到底是什么。可以发个截图吗？

【解决方案2】：

.ui-orderlist .ui-orderlist-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow:auto;
    height:200px;
    width:100%;
}

.ui-orderlist .ui-orderlist-list li {
    margin: 1px;
    padding: 2px;
}

.ui-orderlist .ui-orderlist-button {
    display:block;
    margin-bottom:0.3em;
}

.ui-orderlist .ui-orderlist-button.ui-button-text-icon-primary {
    width:100%;
}

.ui-orderlist .ui-orderlist-item {
    cursor:pointer;
    border:0px none;
    font-weight: inherit;
}

.ui-orderlist .ui-orderlist-caption {
    text-align: center;
    padding:4px 10px 4px 10px;
    border-bottom:0px none;
}

.ui-orderlist table {
    width:100%;
    border-collapse:collapse;
}

【讨论】：

虽然该代码可能会回答问题，但至少提供一点解释将对未来的读者有所帮助。

【解决方案3】：

把这段代码放在style.css中

.ui-orderlist-list-container {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

【讨论】：