How to set OrderList width in PrimeFaces

0
votes

How can I change the widht of a ListOrder in Primefaces?

I tried with width or style but it does not do want i want. It stays small with a scroll:

a busy cat

Do you have any idea?

i tried with css:

    .orderlist {
        width:1000px;
    }

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

Doing so, my page is larger but the area containing the data (and the scrollable list remains very small.

3
cssjsfprimefaces
I tried with width or style but it does not do want i want then what do you want? You must use primefaces particular CSS for this. - Luiggi Mendoza
You mean styleClass and css? I tried that too. - jobe
Then please post what have you tried and why you say it does not do want I want. - Luiggi Mendoza
Hello @user1667910 : I think you are facing this problem due to fixed width of .ui-widget-content styleClass. You can try this .ui-widget-content{width: 5000000px;}. - Diganta
Hello Diganta, thank you for your help. If i do that, other components are larger but not this one. - jobe

3 Answers

1
votes

The following CSS works fine for me:

.ui-orderlist-list {
    width:300px;
}
1
votes
.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;
}
1
votes

Put this code in style.css

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