Topic: Rendering / Styling Issues
Expected behavior
I'm having some issues with the timeline component not rendering properly. It's from an older project that I came back to and the version that is on the website works just fine, but running from code, it doesn't work as it should.
Actual behavior
It doesn't render the icons for the timeline, the backgrounds for the cards, or alternate the cards. I think it is an issue with not having a certain style package installed or referenced correctly, i'm just not sure what it is.
Resources (screenshots, code snippets etc.)
import React from "react";
import ReactDOM from "react-dom";
import "@fortawesome/fontawesome-free/css/all.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import "./assets/scss/mdb.scss";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
ReactDOM.render(<App />, document.getElementById("root"));
registerServiceWorker();
This is the entire code of my index.js. I can't share the full project due to privacy/security issues. Am I missing an import here, or is there a file I'm missing or something?
Krzysztof Wilk staff commented 3 years ago
Could you create a simple project that shows this problem? Your index.js file looks good. I'm still trying but I can't recreate this problem - everything works as expected. It looks like the issue is caused by some styles. Could you also check if this problem occurs in the fresh package? It's hard to say something without a code :(
Keep coding!
Hi!
You can install the @fortawesome/fontawesome-free package and import it in the index.js (before App.js import) just like that:
import '@fortawesome/fontawesome-free/css/all.min.css';
or attach it ass css in the head section of your index.html file via cdn link. That should fix your problem :)
Keep coding!
RehabMedical pro commented 3 years ago
Unfortunately, that did not fix the problem. I added it to my dependencies, it's in both standard and dev dependencies, and I actually ended up deleting my node modules folder so I could have a fresh install. It's in the import in the index.js file before the app.js import but it did not fix the problem. If you need to see some specific lines of code or something, I can probably post them.
Krzysztof Wilk staff commented 3 years ago
Are you sure that you imported also mdb styles in your index.js folder properly? If yes - it would be really helpful to share your project with me :)
Keep coding!
RehabMedical pro commented 3 years ago
Responded below in new post.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: MDB4 4.27.0
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No