p-g form-group changed?

UI Components for React
Post Reply
JBottomley
Posts: 16
Joined: 31 Aug 2018, 12:55

09 Nov 2018, 14:15

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

cagatay.civici
Prime
Posts: 18082
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

13 Nov 2018, 09:33

Not that I can remember, could you please share your code with a screenshot?

JBottomley
Posts: 16
Joined: 31 Aug 2018, 12:55

13 Nov 2018, 14:25

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

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

20 Nov 2018, 14:43

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'

JBottomley
Posts: 16
Joined: 31 Aug 2018, 12:55

20 Nov 2018, 16:31

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

JBottomley
Posts: 16
Joined: 31 Aug 2018, 12:55

23 Nov 2018, 12:49

Please ignore, I've found out the issue

BuckAMayzing
Posts: 5
Joined: 21 May 2019, 18:33

21 May 2019, 18:39

JBottomley wrote:
23 Nov 2018, 12:49
Please ignore, I've found out the issue
Why do people do this? What was the issue?

JBottomley
Posts: 16
Joined: 31 Aug 2018, 12:55

22 May 2019, 10:48

Hi,

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

Hope this helps

BuckAMayzing
Posts: 5
Joined: 21 May 2019, 18:33

22 May 2019, 17:25

This did help. Thanks!

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

24 Jun 2019, 10:29

Thanks a lot for the updates!

Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests