FlexGrid in Serenity

Post Reply
awall
Posts: 1
Joined: 15 Aug 2018, 21:43

06 Jan 2019, 17:36

Hi,

I am trying to use flexgrid ( with a test page for now) but it seem like the breakpoints not working as expected. basically I wanted 2 columns side by side each with a card containing a list of radios and check boxes but unfortunately the outer ( card wrapper div ) always display stacked. in addition to this the radio buttons and the check boxes never show on single line, always wrap and add another line as if the width not enough to hold them all on a single row.

Many Thanks


code below for the test I am doing ( modified the code in Serenity theme Form component sample to use the new flexgrid )



<div class="p-grid p-justify-even">
<div class="p-sm-12 p-md-6 p-lg-6 p-xl-6">
<div class="card card-w-title">
<div class="p-grid" >
<div class="p-col-12"><h1>Radio Buttons </h1></div>
<div class="p-col-12 p-md-4"><p-radioButton name="rg" value="Ultima" label="Ultima" [(ngModel)]="radioValue"></p-radioButton></div>
<div class="p-col-12 p-md-4"><p-radioButton name="rg" value="Icarus" label="Icarus" [(ngModel)]="radioValue"></p-radioButton></div>
<div class="p-col-12 p-md-4"><p-radioButton name="rg" value="Omega" label="Omega" [(ngModel)]="radioValue"></p-radioButton></div>
</div>
</div>
</div>
<div class="p-sm-12 p-md-6 p-lg-6 p-xl-6">
<div class="card card-w-title">
<div class="p-grid" >
<div class="p-col-12"><h1>check Boxes</h1></div>
<div class="p-col-12 p-md-4"><p-checkbox name="cg" value="Ultima" label="Ultima" [(ngModel)]="checkboxValues"></p-checkbox></div>
<div class="p-col-12 p-md-4"><p-checkbox name="cg" value="Icarus" label="Icarus" [(ngModel)]="checkboxValues"></p-checkbox></div>
<div class="p-col-12 p-md-4"><p-checkbox name="cg" value="Omega" label="Omega" [(ngModel)]="checkboxValues"></p-checkbox></div>

</div>
</div>
</div>

merve7
Posts: 467
Joined: 12 Sep 2017, 10:44

07 Jan 2019, 13:13

We will try/review and get back to you.

quartelh
Posts: 10
Joined: 09 Oct 2018, 11:33

15 May 2019, 15:44

Any news on this, since I observed the same behavior (2 times a p-col-x, adding up to 12, will show the cols underneath each other)

merve7
Posts: 467
Joined: 12 Sep 2017, 10:44

11 Jun 2019, 13:36

Hi,
Could you try to add primeflex stylesheet in angular.json file?
angular.json

Code: Select all

 "styles": [		//line 24
        "node_modules/primeng/resources/primeng.min.css",
        //other styles
        "node_modules/primeflex/primeflex.css",
        "src/styles.scss"
],

quartelh
Posts: 10
Joined: 09 Oct 2018, 11:33

11 Jun 2019, 15:11

I just downloaded Senrenity 7.1.1

and added PrimeFlex

Then in Dashboard, but also FormsDemo I added:

Code: Select all

<div class="p-grid">
    <div class="p-col-4">
        <div class="card">
            4 wide with card<br /> and more text
        </div>
    </div>
    <div class="p-col-8">
        <div class="card">
            8 wide with card<br /> and more text<br />Should be visible on 1 row...
        </div>
    </div>
</div>

<div class="p-grid">
    <div class="p-col-4">
            4 wide without card<br /> and more text
    </div>
    <div class="p-col-8">
            8 wide without card<br /> and more text<br />Should be visible on 1 row...
    </div>
</div>
Still issue with PrimeFlex with '12 grid' style columns.

Please fix this (even so because Grid CSS is marked as Deprecated)

quartelh
Posts: 10
Joined: 09 Oct 2018, 11:33

11 Jun 2019, 15:13

merve7 wrote:
11 Jun 2019, 13:36
Hi,
Could you try to add primeflex stylesheet in angular.json file?
angular.json

Code: Select all

 "styles": [		//line 24
        "node_modules/primeng/resources/primeng.min.css",
        //other styles
        "node_modules/primeflex/primeflex.css",
        "src/styles.scss"
],
I tried this, but still not working as expected with '12 grid' / p-col-<x> option

quartelh
Posts: 10
Joined: 09 Oct 2018, 11:33

12 Jun 2019, 13:15

Solution:

add

Code: Select all

box-sizing: border-box;
to

Code: Select all

  .p-col-1,
  .p-col-2,
  .p-col-3,
  .p-col-4,
  .p-col-5,
  .p-col-6,
  .p-col-7,
  .p-col-8,
  .p-col-9,
  .p-col-10,
  .p-col-11,
  .p-col-12 {
    flex: 0 0 auto;
    padding: 0.5em;
  }
so complete style to fix the issue with the 12 grid primeflex is:

Code: Select all

  .p-col-1,
  .p-col-2,
  .p-col-3,
  .p-col-4,
  .p-col-5,
  .p-col-6,
  .p-col-7,
  .p-col-8,
  .p-col-9,
  .p-col-10,
  .p-col-11,
  .p-col-12 {
    flex: 0 0 auto;
    padding: 0.5em;
    box-sizing: border-box;
  }

Post Reply

Return to “Serenity - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests