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: 453
Joined: 12 Sep 2017, 10:44

07 Jan 2019, 13:13

We will try/review and get back to you.

quartelh
Posts: 6
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)

Post Reply

Return to “Serenity - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest