asked on November 21, 2024
When I load a page using the example report the toolbar doesn't format correctly on the page? Can you help resolve this?
Thanks,
Kiran
⋅ November 22, 2024
Hello, Kiran!
Thank you for writing to us.
This issue most likely occurs because Flexmonster stylesheets are not imported into the project. To import styles, paste this line into the globals.css file:
@import "flexmonster/flexmonster.css";
For more information about how to use react-flexmosnter in Nextjs, see this guide: https://www.flexmonster.com/doc/integration-with-next-js/
Please let us know if our answer has helped you.
Best Regards,
Maksym
⋅ November 25, 2024
Hi Maksym,
I have imported flexmonster.css in the globals.css file but I am still running into issues with formatting. I have an error to do with flexmonster-icons.woff see the attached.
Can you help with this?
Thanks,
Kiran
⋅ November 25, 2024
Hello, Kiran!
Thank you for your reply.
The issue with missing flexmonster-icons.woff file is likely caused by bundler configuration in your project. To assist further, could you please answer the following questions:
npx create-next-app command?Could you share the relevant configuration files if you have customized your setup? This will help pinpoint where the issue might be occurring.
We are looking forward to hearing from you.
Best Regards,
Maksym
⋅ November 26, 2024
The Next.js I am using is the default boiler plate and next build is the build tool.
I tried making the path to these files absolute rather than the relative path that is already there, and it worked but I can't have that be the case in production.
Thanks,
Kiran
⋅ November 28, 2024
Hello, Kiran!
Thank you for writing to us.
We cannot reproduce this issue using our Nextjs sample project from GitHub using the latest version of react-flexmonster. One of the screenshots you provided suggests you are using Flemxonster version 2.8.19. We suggest updating Flexmonster to the latest version (2.9.91 as of now) and running the sample project without modifications.
Please let us know if the issue persists after updating Flexmonster.
Best Regards,
Maksym
⋅ December 5, 2024
Hello, Kiran!
After further research, we concluded that 2.8.19 is the latest version where the icons were updated. This version is being added to the request for flexmonster-icons.woff is normal behavior, which does not indicate that an older version is being used.
We suggest looking through the browser's network tab to see the path from which icon files are loaded. If these assets are not found, we recommend modifying the build configurations or trying to import CSS directly on the .tsx pages with Flexmonster:
import 'flexmonster/flexmonster.css';
If the issue persists, please share the Nextjs configuration used in your project and how Flexmonster styles are imported.
Looking forward to hearing from you.
Best Regards,
Maksym