Topic: Rendering / Styling Issues

RehabMedical pro asked 1 year ago


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

Picture illustrating the problem


RehabMedical pro answered 1 year ago


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 1 year 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!


Krzysztof Wilk staff answered 1 year ago


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 1 year 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 1 year 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 1 year ago

Responded below in new post.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: 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