FlexGrid renders in 2 lines instead of 1

[jjayaraman]

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>
				)
			}
		}

[mert.sincan]

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,