Impossible to change css in PrimeFaces ultima template

Question

I'm using the latest version of the ultima template (ver. 2.0.2) in my JSF project. After the last update of the project, something changed in the css, since there is this selector:

 * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

Since these like of codes feel bad in my JSF project (the command button in the dataTable are cropped) I need to remove these lines of code. By the way I've noticed that these lines of code are in the _common.scss file, so I decide to comment them, but unfortunately they are still present! I've clean the Google Chrome cache, clean the project in Eclipse and clean the Wildly. The file that is loaded as css is this:

http://localhost:8080/myApp/javax.faces.resource/theme.css.xhtml?ln=primefaces-ultima-cyan

How to fix this problem?

**UPDATE

This it the HTML:

<tr data-ri="0" data-rk="271" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false">
  <td role="gridcell"><span class="ui-column-title">Numero bolla</span>10269</td>
  <td role="gridcell"><span class="ui-column-title">Consegna</span>31/10/2019</td>
  <td role="gridcell"><span class="ui-column-title">Destinatario</span>Mario Rossi (RSSMRI81T78L872T)</td>
  <td role="gridcell"><span class="ui-column-title">Rif. ordine cliente</span>Rif_1</td>
  <td role="gridcell"><span class="ui-column-title">Variante</span>200K</td>
  <td role="gridcell"><span class="ui-column-title">Stato</span><div id="form:dtOrders:0:j_idt46" class="ui-progressbar ui-widget ui-widget-content ui-corner-all ui-progressbar-determinate"><div class="ui-progressbar-value ui-widget-header ui-corner-all" style="display:block;width:10%"></div><div class="ui-progressbar-label" style="display:block">10%</div></div>Creata</td>
  <td role="gridcell"><span class="ui-column-title">Ultima modifica</span>29/10/2019</td>
  <td role="gridcell"><span class="ui-column-title"></span><button id="form:dtOrders:0:j_idt58" name="form:dtOrders:0:j_idt58" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" onclick="PrimeFaces.ab({s:&quot;form:dtOrders:0:j_idt58&quot;,f:&quot;form&quot;});return false;" style="margin:auto;" title="View" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c ui-icon-timeline"></span><span class="ui-button-text ui-c">View</span></button></td>
  <td role="gridcell"><span class="ui-column-title"></span><button id="form:dtOrders:0:j_idt60" name="form:dtOrders:0:j_idt60" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" onclick="PrimeFaces.ab({s:&quot;form:dtOrders:0:j_idt60&quot;,f:&quot;form&quot;});return false;" style="margin:auto;" title="Imposta RFID" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c ui-icon-nfc"></span><span class="ui-button-text ui-c">Imposta RFID</span></button></td>
  <td role="gridcell"><span class="ui-column-title"></span><button id="form:dtOrders:0:j_idt62" name="form:dtOrders:0:j_idt62" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" onclick="PrimeFaces.ab({s:&quot;form:dtOrders:0:j_idt62&quot;,f:&quot;form&quot;});return false;" style="margin:auto;" title="Imposta RFID" type="submit" role="button" aria-disabled="false"><span class="ui-button-icon-left ui-icon ui-c ui-icon-nfc"></span><span class="ui-button-text ui-c">Imposta RFID</span></button></td>
</tr>

Don't remove them, work with them (removing them will break many other things). Correct the CSS you have on the datatable so the buttons are not cropped. But that is all pure css and html initially, not jsf. (I improved your title btw and your tagging) — Kukeltje, Nov 04 '19 at 23:17
Thank you! The question is about I’ve commented them, but these lines of css are still present, why? Do you have any idea why? Also could you please hint me a way to uodate correctly the theme, when a new update is released? What are the ultima jar for? — I love coding, Nov 05 '19 at 06:00
And you never tried to remove the `style="margin:auto;"`? And this is strange html... it is illegal... — Kukeltje, Nov 05 '19 at 07:43
I've deleted it, but the problem is that the tds can't change the width, even if I fix it; why? — I love coding, Nov 05 '19 at 11:26
No idea, I don't have your code nor these templates... All plain css most likely... Next to impossile to help with that... — Kukeltje, Nov 05 '19 at 14:03

squaregoldfish · Answer 1 · 2019-11-05T06:45:28.327

0

One trick I've used in the past is to leave the PrimeFaces CSS alone, and add my own stylesheet that loads after it - use that one to override what PrimeFaces does.

So in your CSS file you can reset box-sizing to whatever you want it to be.

Of course as Kukeltje says, doing this globally may break other stuff, in which case you can add you own class to override it just for the individual pieces you need.

edited Nov 05 '19 at 06:45

answered Nov 05 '19 at 06:39

squaregoldfish

709
8
20

Thank you! How Can I reset it? What strategy do you adopt to perform the update of the theme? – I love coding Nov 05 '19 at 06:54
Your answer is a duplicate of this:https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles. – Kukeltje Nov 05 '19 at 07:16
@ilovecoding: don't 'reset' it, fix the css that is applied to the bottons so they are shown correctly – Kukeltje Nov 05 '19 at 07:18
Could you please give me an hint to how fix the commandButton with css? I'm trying with Google Chrome inspection, but it is hard! – I love coding Nov 05 '19 at 07:25

Impossible to change css in PrimeFaces ultima template

1 Answers1