Page 1 of 1

FlexGrid base case not working

Posted: 21 May 2019, 18:58
by 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

Re: FlexGrid base case not working

Posted: 22 May 2019, 17:28
by 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"

Re: FlexGrid base case not working

Posted: 24 Jun 2019, 10:28
by aragorn
Yess ;) Thanks a lot for the update!

Best Regards,