FlexGrid base case not working

[BuckAMayzing]

HI folks,

The below is not being rendered correctly. Any ideas?

It's worth noting that the CSS must be getting correctly imported, because float labels are working with text boxes.

component:

Code: Select all

const HomePage = () => (
    <div className="p-grid">
        <div className="p-col">1</div>
        <div className="p-col">2</div>
        <div className="p-col">3</div>
    </div>
);

index:

Code: Select all

import "bootstrap/dist/css/bootstrap.min.css";
import "primereact/resources/themes/nova-light/theme.css";
import "primereact/resources/primereact.min.css";
import * as React from "react";
import { render } from "react-dom";
import { Provider as ReduxProvider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./components/App";
import "./index.css";
import configureStore from "./redux/configureStore.dev";
import initialState from "./redux/reducers/initialState";

const store = configureStore(initialState);

render(
    <ReduxProvider store={store}>
        <Router>
            <App />
        </Router>
    </ReduxProvider>,
    document.getElementById("app"),
);

App:

Code: Select all

const App = () => {
    return (
        <div className="container-fluid">
            <Header />
            <Switch>
                <Route exact path="/" component={HomePage} />
            </Switch>
        </div>
    );
};

export default App;

Thanks

[BuckAMayzing]

This was solved in another thread. The issue was that the primeflex.css file was not included.

run

Code: Select all

npm i --save primeflex

or

Code: Select all

yarn add primeflex

and include the following line in your entry point file:

Code: Select all

import "primeflex/primeflex.css"

[mert.sincan]

Yess Thanks a lot for the update!

Best Regards,