Page 1 of 1

p-g form-group changed?

Posted: 09 Nov 2018, 14:15
by JBottomley
Has there been changes within 2.0.0-beta.9 that has changed the way p-g form group works? In 2.0.0-beta.3 it I can line everything up with but in 2.0.0-beta.9 that doesn't seem to work

Re: p-g form-group changed?

Posted: 13 Nov 2018, 09:33
by cagatay.civici
Not that I can remember, could you please share your code with a screenshot?

Re: p-g form-group changed?

Posted: 13 Nov 2018, 14:25
by JBottomley

Code: Select all

<div className="p-g form-group">


                    <div className="p-g-12 p-md-4">
                    </div>
                    <div className="p-g-12 p-md-2">
                    <label>Current</label>
                    </div>
                    <div className="p-g-12 p-md-2">
                    <label>Min</label>
                    </div>
                    <div className="p-g-12 p-md-2">
                    <label>Max</label>
                    </div>
                    <div className="p-g-12 p-md-2">
                    </div>


                    <div className="p-g-12 p-md-4">
                    <label>Total tree canopy cover (%)</label>
                    </div>
                    <div className="p-g-12 p-md-2">
                    <InputText keyfilter='int' value={this.state.TreeCanopyCurrent} />
                    </div>
                    <div className="p-g-12 p-md-2">
                    <InputText keyfilter='int' value={this.state.TreeCanopyMin} />
                    </div>
                    <div className="p-g-12 p-md-2">
                    <InputText keyfilter='int' value={this.state.TreeCanopyMax} />
                    </div>
                    <div className="p-g-12 p-md-2">
                    </div>
PrimeReact Version 2.0.0-beta.3 screenshot

Image

Direct link - https://1drv.ms/u/s!AvI06DbqRFOAgQCeafyUmtrtBvpO

PrimeReact Version 2.0.0-beta.9 screenshot

Image

Direct link - https://1drv.ms/u/s!AvI06DbqRFOAgQFm59SLZK7P--Yy

Re: p-g form-group changed?

Posted: 20 Nov 2018, 14:43
by merve7
This is the wrong usage. You can see in https://www.primefaces.org/primereact/#/flexgrid
Please replace 'p-g' with 'p-grid' and 'p-g-12' with 'p-col-12'

Re: p-g form-group changed?

Posted: 20 Nov 2018, 16:31
by JBottomley
This is the code I have:

Code: Select all

 <div className="p-col-12"> 
                    <div className="p-grid">
                                <div className="p-col-12 p-md-6 p-lg-2">
                                    <label htmlFor="costcentre">Cost Centre*</label>
                                    <InputText id="costcentre" disabled value={this.state.CostCentre} onChange={e => this.setState({CostCentre: e.target.value})}/>
                                </div>
                                <div className="p-col-12 p-md-6 p-lg-2">
                                    <label htmlFor="woodno">Wood Number</label>
                                    <InputText id="woodno" disabled value={this.state.WoodNo} onChange={e => this.setState({WoodNo: e.target.value})}/>
                                </div>
                                <div className="p-col-12 p-md-6 p-lg-4">
                                    <label htmlFor="region">Region*</label>
                                    <Dropdown id="region" autoWidth={false} value={this.state.Region} onChange={event => this.setState({Region: event.value})}/>
                                </div>
                                <div className="p-col-12 p-md-6 p-lg-2">
                                    <label htmlFor="landha">Land Ha*</label>
                                   <InputText id="landha"onChange={(e) => this.setState({LandHa: e.target.value})} value={this.state.LandHa} />
                                </div>
                                <div className="p-col-12 p-md-6 p-lg-2">
                                    <label htmlFor="landacres">Acres</label>
                                   <InputText id="landacres" disabled onChange={(e) => this.setState({LandAcres: e.target.value})} value={this.state.LandAcres} />
                                </div>
and I get the following result:

https://1drv.ms/u/s!AvI06DbqRFOAgQI5m2DKWiZd-qT0

This to me still isn't working correctly

Re: p-g form-group changed?

Posted: 23 Nov 2018, 12:49
by JBottomley
Please ignore, I've found out the issue

Re: p-g form-group changed?

Posted: 21 May 2019, 18:39
by BuckAMayzing
JBottomley wrote:
23 Nov 2018, 12:49
Please ignore, I've found out the issue
Why do people do this? What was the issue?

Re: p-g form-group changed?

Posted: 22 May 2019, 10:48
by JBottomley
Hi,

If I can remember correctly, I needed to apply the primeflex/primeflex.css into my App.js/Index file

Hope this helps

Re: p-g form-group changed?

Posted: 22 May 2019, 17:25
by BuckAMayzing
This did help. Thanks!

Re: p-g form-group changed?

Posted: 24 Jun 2019, 10:29
by aragorn
Thanks a lot for the updates!

Best Regards,