Primeng: Nova-light: Border-box sizing applied to all html elements

Created on 14 Mar 2019  路  5Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting

Plunkr Case (Bug Reports)

https://stackblitz.com/edit/github-g1quqa

Current behavior
Nova-light now globally applies border-box sizing to all HTML elements of an application. This causes styling issues for custom or third party components that are outside of PrimeNG's control.

You can say that this a duplicate of 7352, which was summarily closed without explanation. I can think of no reason for PrimeNG to apply border-box sizing to * as it changes the sizing of all elements, even those elements which don't use PrimeNG. If your inclination is to close this as well, I respectfully request a reason be provided for this behavior.

This breaks styling globally:

resources/themes/nova-light/theme.css

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

Before PrimeNG 7 (default content-box):
BeforePrimeNG7

After PrimeNG 7 (now with nova-light's border-box applied to *):
AfterPrimeNG7

Expected behavior
PrimeNG themes only affect explicitly declared PrimeNG components/directives/classes.

What is the motivation / use case for changing the behavior?
Unbreak the styling of my application.

  • Angular version: 7.x

  • PrimeNG version: 7.x

  • Browser: all

Most helpful comment

No one is arguing that you shouldn鈥檛 use border-box for PrimeNg. Other libraries don鈥檛 globally apply their styles to entire applications! I鈥檓 sorry but that鈥檚 absurd. Please take your fingers out of your ears, apply the border-box just to PrimeNg, and stop messing with global styles.

And it is extremely rude of you to just close these cases without even hearing your users out.

All 5 comments

Why not change it to something like this?

[class^="ui-"] {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Almost all CSS libraries use border-box as default so it is default in our themes as well. It is too late to make a change as it will break existing apps.

No one is arguing that you shouldn鈥檛 use border-box for PrimeNg. Other libraries don鈥檛 globally apply their styles to entire applications! I鈥檓 sorry but that鈥檚 absurd. Please take your fingers out of your ears, apply the border-box just to PrimeNg, and stop messing with global styles.

And it is extremely rude of you to just close these cases without even hearing your users out.

I even gave you the css to do it. Why would you NOT use it?

@cagataycivici Why are you being so recalcitrant? Are you even reading the issues? Reopen the issues that you've appallingly closed summarily, and re-apply your change to just primeng elements, as you have elsewhere.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

watalberto picture watalberto  路  3Comments

KannanMuruganmony picture KannanMuruganmony  路  3Comments

Helayxa picture Helayxa  路  3Comments

papiroca-tm picture papiroca-tm  路  3Comments

jisqaqov picture jisqaqov  路  3Comments