1

I have a few p:autoCompletes in upper part of the page, these need to be wide. In the bottom of the page there is a p:dataTable with editable values. In one column data is edited with p:autoComplete. These need to be narrow and because table can have many rows there can be any number of these. All autocomplete elements have multiple="true" attribute set.

Setting width for CSS class .ui-autocomplete-multiple-container would affect also the autocomplete elements in upper part of the page. How do I set width only for autocomplete elements in data table?

Edit:

Here is a very good summary about the topic but it does not address the case where any amount of autocomplete elements exist in data table and width of only those autocomplete elements must be changed.

Panu Haaramo
  • 2,932
  • 19
  • 41
  • 1
    Does this answer your question? [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) – Kukeltje Apr 19 '20 at 19:05
  • No, I don't see there a solution for datatable rows (amount of autocomplete elements not known). – Panu Haaramo Apr 20 '20 at 11:22

1 Answers1

0
div[id^="fRules:dtRules:"][id$=":acServices"] .ui-autocomplete-multiple-container {
    width: 11em;
}

In this sample div id above the ul tag is fRules:dtRules:0:acServices on first row. Number will be 1 on second row and so on.

Panu Haaramo
  • 2,932
  • 19
  • 41
  • Like mentioned in here: https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles but more generic (you could create a Q/A for each and every component type) – Kukeltje Apr 19 '20 at 19:05
  • This is a special case requiring wild card selector (with wild card in the middle) which I learned to use and wanted to share. – Panu Haaramo Apr 20 '20 at 11:25