FlexGrid in Serenity
Posted: 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>
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>