CSS Fix for Primeflex Flexgrid when Grid wraps to new line too early (after 11 rows instead of 12)?

Question

I'am using the Primeflex Flexgrid according to the documentation, but it wraps to a new line after 11 rows, when instead it should only wrap if 12 rows are used. Does someone have a fix for that? Version in package.json: "primeflex": "^1.0.0-rc.1",

I have included the "node_modules/primeflex/primeflex.css" in my angular.json, otherwise it wouldn't wrap anything at all, so this is not the issue. I suspect the problem is somewhere in the Library, but I am too newbie to find the solution (yet) and simply override it with a SCSS Class myself. I also found an existing issue on Primflexes Github, but the solution that another user reported there is not explained well enough for me to understand it.

See my Stackblitz demo of the problem.

I expect it to work like this (sorry for the picture link, but apparently I'm not smart enough to properly include an image).

Also, if someone with more Rep could add the Tag "Primflex" it would be great.

this is the issue with library. I will suggest you yo use FlexGrid (http://flexboxgrid.com/). — Piyush Jain, Aug 08 '19 at 08:05
I sadly cannot, since it's my companies policy to use PrimeNG and its associated libraries. — TheRealOha, Aug 08 '19 at 08:18
As I said in the question, I am quite a newbie to (s)CSS. Do you mean something like "box-sizing: border-box;"? — TheRealOha, Aug 08 '19 at 08:40
Possible duplicate of [flex grid not working for p-col-# primeng Angular 5](https://stackoverflow.com/questions/52313827/flex-grid-not-working-for-p-col-primeng-angular-5) — TheRealOha, Nov 21 '19 at 08:50

TheRealOha · Answer 1 · 2019-10-09T08:43:55.177

Since maybe not everyone knows what to do with the answer I marked as accepted, I added the description of how I achieved the fix based on the proposal of @piyush jain. This is how I did it:

I created a new SCSS file "_flexgridfix.scss"
I put the file in my src folder on the same level where the "styles.scss" is
Then I added piyush jains code to the file (only the scss class names and the value "box-sizing: border-box;", not the other values, they are not needed)
I then imported the new scss file in the "styles.scss" like this: @import "flexgridfix.scss";

Note: I had to explicitly name the new file with an underscore "_" in the beginning, otherwise Visual Studio Code wouldn't resolve the import properly. Works like a charm, it now wraps correctly.

EDIT: Apparently it's fixed now: see https://github.com/primefaces/primeflex/issues/8#issuecomment-539873278

score 1 · Accepted Answer · answered Aug 08 '19 at 09:12

1

do this change and it will fix your issue. Just add box-sizing: border-box;

answered Aug 08 '19 at 09:12

Piyush Jain

1,895
3
19
40

Thank you, that pointed me in the right direction. I had to tinker a little though because your answer gave me the "what", but not the the "how", so I will add my steps as an additional answer, but keep yours as accepted. – TheRealOha Aug 08 '19 at 09:42
let me know if you face any issues. – Piyush Jain Aug 08 '19 at 09:50

CSS Fix for Primeflex Flexgrid when Grid wraps to new line too early (after 11 rows instead of 12)?

2 Answers2