Tile css is getting overridden

[amitjoy]

In my application, I have been using TilesFX (17.1.9). I have also specified .root selector as follows:

.root {
    -fx-font-size  : 11.0pt;
    -fx-font-family: 'Gill Sans';
}

This works perfectly for the application but somehow it behaves quite strange for TileFX. When the application starts, the tiles use the CSS embedded in the TilesFX library and when the application goes into background and comes again to foreground, the Tiles start using the CSS specified in the root node (.root).

I would like to use the CSS embedded within the library all the time. Is there any way to fix this issue that even if the application goes to background, the tiles will keep on using the CSS from the TilesFX library and stay consistent always.

Screenshot after application starts:

Screenshot after application goes to background and returns to foreground:

[HanSolo]

Sorry for the late reply. So it looks like this only happens in the NumberTileSkin right?

[amitjoy]

No issues at all. Actually it happens in all the skins but the skins in the last rows are updated in every second and that's why the skin css gets reverted back to the one embedded in TilesFX. That's the reason, they look normal. Since the other skins in the middle row ain't updated in every second dynamically, it just uses the root css and that's why they look strange. It actually gets overridden in all skins.

[amitjoy]

Even when a dialog appears on this Overview tab, the CSS gets overridden.

[amitjoy]

If the application loses focus, the CSS gets overridden

[HanSolo]

Hmm...interesting because TilesFX only makes very little use of css. Could you provide a simple code example so that I can reproduce your issue?

[amitjoy]

Is it possible for you to checkout the actual project and test it there directly? It would just take 5 mins to set up in Eclipse. I am proposing this as this problem with the CSS override is so weird that I cannot even pinpoint who the real culprit here is and how I can even work it around.

If you are interested to look into the actual application: https://github.com/amitjoy/osgifx

• Install Bndtools from Eclipse Marketplace
• Import all the projects from the checked out osgifx directory (File -> Import -> General -> Existing Projects into Workspace and select Search for nested projects)
• After successfully importing the projects, make sure all the projects are successfully built in Eclipse (nothing in red)
• Go to com.osgifx.console.product project, expand it, double click on osgifx.bndrun
• Click on Debug OSGi
• The application will start and the very first UI will contain the TilesFX integration
• You can try to lose focus by keeping any of the open application before OSGi.fx and it will override the CSS
• Or you can use tab to switch between open applications in your machine, you will notice that the fonts change most of the times

I managed to get rid of it partially by recreating the tiles every time when the Overview tab in this application is on focus. But it is also not a rock solid solution and needless to say, not a performant solution as well.

The TilesFX integration tab sources are in com.osgifx.console.ui.overview project - com.osgifx.console.ui.overview.OverviewFxUI.

You can easily debug it. I spent quite a good number of hours to fix this until I thought of contacting you for your help.

[HanSolo]

I would prefer a simple example that shows the problem because I cannot reproduce it here with the projects using TilesFX. To me it looks like a redraw issue because the text is scaled in code and no css is involved here.

[amitjoy]

No issues at all. I will then try to create a small example and will let you know. Thanks for your support 👍