FlexGrid base case not working

UI Components for React
Post Reply
BuckAMayzing
Posts: 5
Joined: 21 May 2019, 18:33

21 May 2019, 18:58

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
Posts: 5
Joined: 21 May 2019, 18:33

22 May 2019, 17:28

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"

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

24 Jun 2019, 10:28

Yess ;) Thanks a lot for the update!

Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest