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>
FlexGrid in Serenity
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Hi,
Could you try to add primeflex stylesheet in angular.json file?
angular.json
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 just downloaded Senrenity 7.1.1
and added PrimeFlex
Then in Dashboard, but also FormsDemo I added:
Still issue with PrimeFlex with '12 grid' style columns.
Please fix this (even so because Grid CSS is marked as Deprecated)
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>
Please fix this (even so because Grid CSS is marked as Deprecated)
I tried this, but still not working as expected with '12 grid' / p-col-<x> optionmerve7 wrote: ↑11 Jun 2019, 13:36Hi,
Could you try to add primeflex stylesheet in angular.json file?
angular.jsonCode: Select all
"styles": [ //line 24 "node_modules/primeng/resources/primeng.min.css", //other styles "node_modules/primeflex/primeflex.css", "src/styles.scss" ],
Solution:
add to
so complete style to fix the issue with the 12 grid primeflex is:
add
Code: Select all
box-sizing: border-box;
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;
}
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;
}
-
- Information
-
Who is online
Users browsing this forum: No registered users and 3 guests