Issue with layout of toolbar

posted on November 21st, 2024

Answered

Kiran Mistry 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

5 answers

Public

Maksym Diachenko ⋅ Flexmonster ⋅ 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

Public

Kiran Mistry ⋅ 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

Public

Maksym Diachenko ⋅ Flexmonster ⋅ 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:

Which bundler or build tool you are using for your project?
Are your settings different from the default ones provided by the Next.js boilerplate created with the 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

Public

Kiran Mistry ⋅ 6 days ago

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

Public

Maksym Diachenko ⋅ Flexmonster ⋅ 4 days ago

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

Issue with layout of toolbar

5 answers

Please login or Register to Submit Answer