Added box-sizing: border-box to ui-g

[mlangwell]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

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

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

My team and I have been spending a lot of time to completely remove bootstrap and go with PrimeNg. We like the all angular solution and feel that a lot of your controls have made our development easier and quicker. However, when we removed bootstrap we noticed a lot of our UI was wrapping even though we were using the correct column sizes. We solved this by adding:

*,
*::after,
*::before {
  box-sizing: border-box
}

However, this should have already been in your grid.css file.

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/Nxca3ovCbtvx9kpGds0q?p=preview

Current behavior

Grid class selectors all use percent width, and the ui-grid does not use box-sizing: border-box. This causes the width percentage to be applied only to the content area of the box element, and makes content wrap even though you are using the correct column sizes.

Expected behavior

Content should not be wrapping while using correct column sizing equating 12.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

To use PrimeNg without bootstrap

Please tell us about your environment:

• Angular version: 2.0.X

• PrimeNG version: 2.0.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[cagataycivici]

Do you use ui-grid or ui-g? Still I've added box border-box to ui-g. Note that ui-grid is deprecated

[mlangwell]

I am using ui-g