FlexGrid renders in 2 lines instead of 1

UI Components for React
Post Reply
jjayaraman
Posts: 16
Joined: 09 Jul 2013, 10:49

12 Sep 2019, 16:23

Hello

I am trying to use flexgrid https://www.primefaces.org/primereact/#/flexgrid

Even though I define 2 elements with p-col-4 & p-col-8 they are formed in 2 rows instead of just 1 row
I am trying to bring in one line.


Here is my code.

Thanks, Jay


Code: Select all

		import React, { Component } from 'react'

		import { Panel } from 'primereact/panel';
		import { InputText } from 'primereact/inputtext';
		import { Messages } from 'primereact/messages';
		import { Message } from 'primereact/message';
		import { Growl } from 'primereact/growl';
		import { Row, Container, Col } from 'react-bootstrap';

		export default class CreateComponent extends Component {

			constructor() {
				super();
				this.state = {
					row: {
						code: '',
						description: ''
					}
				}
			}


			/** Helper to show/hide validation error messages */
			isValidStyle = (value) => {
				return value === '' ? { 'display': 'block' } : { 'display': 'none' };
			}

			/** Generic event to update all the field values */
			updateProperty(property, value) {
				let row = this.state.row;
				row[property] = value;
				this.setState({ row: row });
			}


			render() {
				return (
					<div>
						<form>
							<Panel header="Create Component">

								<div className="p-grid p-fluid" >
									<div className="p-col-4" style={{ padding: '.75em' }}><label htmlFor="code">Code</label></div>
									<div className="p-col-8" style={{ padding: '.5em' }}>
										<InputText id="code" onChange={(e) => { this.updateProperty('code', e.target.value) }} value={this.state.row.code} />
										<Message severity="error" text="Field is required" style={this.isValidStyle(this.state.row.code)} ></Message>
									</div>
								</div>

							</Panel>
						</form>
					</div>
				)
			}
		}


aragorn
Posts: 3761
Joined: 29 Jun 2013, 12:38

13 Sep 2019, 09:14

It is an expected behavior. Please try;

Code: Select all

render() {
        return (
            <div>
                <form>
                    <Panel header="Create Component">

                        <div className="p-grid p-fluid" >
                            <div className="p-col-4" style={{ padding: '.75em' }}><label htmlFor="code">Code</label></div>
                            <div className="p-col-8" style={{ padding: '.5em' }}>
                                <div className="p-grid">
                                    <div className="p-col-8">
                                        <InputText id="code" onChange={(e) => { this.updateProperty('code', e.target.value) }} value={this.state.row.code} />
                                    </div>
                                    <div className="p-col-4">
                                        <Message severity="error" text="Field is required" style={this.isValidStyle(this.state.row.code)} ></Message>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </Panel>
                </form>
            </div>
        )
    }
Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest