Premium support for our pure JavaScript UI components


Post by victor_bezak »

Hello, we're using a fully-licensed version of the grid and gantt packages, and we're having an issue where our icons aren't rendering, they're just appearing as boxes. Can you please help us resolve this?

The screenshot I'm sharing shows some expand/collapse icons, but I hacked the styling to apply these. However, the column header still has the default bryntum sorting icons with class .b-sort-icon, so this is a good example of the issue we're having (see attachment)

Attachments
Screenshot 2024-06-13 at 1.18.29 PM.png
Screenshot 2024-06-13 at 1.18.29 PM.png (51.93 KiB) Viewed 285 times

Post by mats »

Any 404s for the font files on your console? Sounds like font files missing.


Post by victor_bezak »

no console errors or 404's. Plus it does look like I'm getting some font-awesome assets received through the network. Still seeing boxes though

Screenshot 2024-06-13 at 3.51.52 PM.png
Screenshot 2024-06-13 at 3.51.52 PM.png (174.33 KiB) Viewed 273 times

Post by marcio »

Hey victor_bezak,

Could you please assemble a sample project for us to debug? You can have more info on how to do that by checking our guidelines here https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

Best regards,
Márcio


Post by khattakdev »

Hey victor,

In addition to sharing a sample project, please share the guide from our docs you've followed.

Arsalan
Developer Advocate


Post by victor_bezak »

That sounds like a lot of work lol. I'll see if I can debug on my own first. If the assets are loaded, imported, and invoked properly they should be rendering. So I'll assess those 3 areas. If I'm unable to resolve on my own I'll work on assembling a sample project. And also, If I am able to resolve, I'll follow-up here in the thread to notify of what the issue/fix was.

I appreciate the replies, thank you!


Post by victor_bezak »

Ah, I might be seeing the issue. It looks like the path for the fa assets are looking for a "/public/" folder, whereas we don't have one in our local repo. Are there any configs available to adjust this path to look for "/web-app/" instead?

And yes, we do have javascript enabled lol. All of the /web-app/ assets are loading fine

Screenshot 2024-06-14 at 12.02.20 PM.png
Screenshot 2024-06-14 at 12.02.20 PM.png (103.74 KiB) Viewed 222 times

Post by marcio »

Hey victor_bezak,

You can replace the following variable in your SASS file

$fa-font-path: "@bryntum/calendar/fonts";
@import "@bryntum/calendar/source/resources/sass/themes/material.scss";

Please let us know if that solves your issue.

Best regards,
Márcio


Post by saki »

In our demos, we do copy font files to public folder (in package.json):

  "postinstall": {
    "node_modules/@bryntum/demo-resources/images/favicon.png": "copy public/favicon.png",
    "node_modules/@bryntum/grid/*.css*": "copy public/themes/",
    "node_modules/@bryntum/grid/fonts/*": "copy public/themes/fonts/"
  },

so if you've taken a demo as a model and you don't have public then you need to adjust the copy destination.


Post by victor_bezak »

Following these 2 steps to setup postinstall (found here https://www.npmjs.com/package/postinstall):

  1. add a new npm script called "postinstall" with value also being "postinstall" (ie. "postinstall": "postinstall")

  2. add to the end of dependency list "postinstall": "*"

I was able to get your recommended postinstall property to run as expected. I slimmed it down to just have the 3rd line, ran a fresh "npm install" and this fully resolved my issues ✅

{
    "scripts": {
        ...,
        "postinstall": "postinstall"
    },
    "dependencies": {
        ...,
        "postinstall": "*"
    },
    "postinstall": {
        "node_modules/@bryntum/grid/fonts/*": "copy public/themes/fonts/"
    }
}

Thank you, team! I really appreciate y'all 💪🏼


Note for others reading with similar issue: if you're running your frontend through a docker container, you may need to rebuild/restart your container to pick up new changes to your package.json


Post Reply