The absence of stylesheets being loaded is a common occurrence in a modular JavaFX Application that has been published in

My JavaFX application is modular and functions perfectly in loading all stylesheets when running through IntelliJ IDE.

However, upon publishing the application as a PKG file for Mac platform and attempting to run it, no CSS styling is applied. While the PKG file successfully installs the JavaFX application on Mac, the stylesheet fails to load.

The application runs as expected but lacks any CSS styling.

I am utilizing openJDK-15.0.2 and creating the PKG file using jpackage. Folder Structure:

In order to access the resources:

Class clazz = SocketClientFX.class;        
Scene scene = new Scene(root);
scene.getStylesheets().add(clazz.getResource("/styles/Styles.css").toString());
cssjavafxmodularityjava-module

Answer №1

To address this issue, I successfully resolved it by including the keyword "opens" in module-info.java for each resource directory.

For instance:

opens styles.common;
opens jsonFiles;
opens images.common;
opens styles.stevePane;
and so on...

Within the code, every resource is then accessed like this:

containerBorderPane.getStylesheets().add("/styles/stevePane/loadingWindow.css");

After rebuilding the project and generating a new PKG file, upon reinstalling and running it, all resources such as CSS files were properly loaded.

In cases where the resource is accessed via getResource(), as shown below, there is no necessity to specify the opens directive in the module-info.java.

scene.getStylesheets().add(clazz.getResource("/styles/Styles.css").toString());

A big thank you to @James_D and @Slaw for your valuable input.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to use Css Autoprefixer on multiple files at once with a single function

My project built with Angular2 contains over 100 CSS files that do not have any prefixes for browsers like Mozilla or Chrome. I am looking for a tool, gulp task, or anything else that can automatically add prefixes to all of my CSS files. I attempted to u ...

cssangularautoprefixer

"Utilize openlayers' map.updateSize function to automatically adjust the map size in response to

When trying to display a side panel, I want to ensure that the map's proportions stay within the new div width or height. Currently, the map is simply resized, causing the countries to appear distorted. I attempted to use map.updateSize without succes ...

javascriptjquerycssopenlayers

"Recently, I included a function called 'test' in the code, but I encountered an error stating that it was not recognized as a function. Can someone provide assistance

Issue Detected A 'TypeError' has been thrown: ".goal_test".click is not defined as a function Feel free to collaborate on the code by clicking this link: Please note that my modified code is enclosed within asterisk symbols. ...

javascripthtmlcss

Images Centerfold Team

I am facing a challenge in creating a group of images for an album. There seems to be a significant gap on the right side, which cannot be resolved without using padding. However, adding padding only works for my current PC resolution and creates a larger ...

htmlcsstwitter-bootstrap-3

Verify the visibility of the toggle, and eliminate the class if it is hidden

I have implemented two toggles in the code snippet below. I am trying to find a solution to determine if either search-open or nav-open are hidden, and if they are, then remove the no-scroll class from the body element. $(document).ready(function() { ...

javascriptjqueryhtmlcss

Fuzzy Background to Enhance Your Bootstrap 5 Offcanvas Navigation Menu

Currently utilizing Bootstrap v5.2, I am endeavoring to replicate the image displayed in the link below: Blurry Sidebar Backdrop As per the MDN Documentation, backdrop-filter is intended for blurring the background of an element. .offcanvas-backdrop { ...

javascripthtmlcssbootstrap-5

Every time I make a change to the code, Laravel's css/app.css file mysteriously vanishes from the mix-manifest.json

Whenever I make a change in my code, the line css/app.css in mix-manifest.json disappears. The only solution is to execute npm run watch or npm run dev, but the problem reoccurs each time I modify the code. Here is how my mix-manifest.json looks when eve ...

csslaravelnpmmodulemanifest

Hierarchy of importance when multiple style rules affect an element

When an element in HTML has multiple style rules applying to it, what is the precedence order? The rules that apply to an element identified by its unique id come first Next are the rules applied to all elements of a specific class Lastly are the rules th ...

htmlcss

Achieving an italicized appearance throughout an HTML document

I recently downloaded a sample page from the Mathjax website and acquired their package from Github to use it locally. In addition, I wanted to incorporate the computer modern font, so I unzipped the file containing ttf files into fonts/cmu. Here's ...

htmlcssmathjax

Incorporate a new style into several previous slides using the Slick carousel feature

I'm attempting to utilize the Slick carousel to create a timeline. My goal is for the previous slides to remain colored as you progress through the timeline, and turn grey when you go back. I've tried using onAfterChange and onBeforeChange, but I ...

javascriptcssslick.js

What could be causing the extra space at the top of my div element?

My goal is to accomplish the following: However, there appears to be an unnecessary gap above the Social icons div. You can view the live page at This is my current markup:- <header> <img src="images/home-layout_02.jpg" alt="Salem Al Hajri Logo ...

csshtml

What is the best way to incorporate two banners on the Magento homepage alongside my flexslider?

I recently made the switch from using a camera.js slider on my website to a Flexslider. The reason for this change was that I couldn't make the camera.js slider clickable, and I wanted to eliminate the 'Click here' button. However, now that ...

cssmagentocontent-management-systemflexsliderbanner

Captions in Bootstrap 4 carousel vanish when adjusting size

My Bootstrap 4 carousel is displaying GIFs with captions for different project features. The captions work well on medium/large screens, but disappear entirely on smaller screens. How can I ensure the captions remain visible on smaller screens? <div ...

javascripthtmlcssbootstrap-4

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Hello there, I need some advice on how to adjust a one-pixel difference between Chrome and Firefox. The menu links appear correctly in Chrome, but in Firefox, they are 1px smaller than they should be. Below is the CSS code: ul#menu { padding: 0 0 2px ...

htmlcssgoogle-chromefirefoxbrowser

Tips for choosing the parent's parent and applying a width of 100%

I am currently facing some challenges while creating a simple navigation bar from scratch. I am struggling with setting specific widths, especially wanting .navbarDropBtn to align its width with .navbarMain. However, it seems to only match the width of the ...

htmlcss

What causes the child div to not be centered when using margin and border box?

<style> .parent { width: 300px; height: 300px; border: 1px solid red; padding: 20px; } .child { box-sizing: border-box; margin: 20px; width: 100%; height: 100%; ...

css

Can a specific CSS rule be written in Material UI using makeStyles that will only apply if the element has both classes together?

It's common knowledge that achieving this in CSS is a possibility. .makeStyles-mainNavWrapper-67.sticky{ position: fixed; top: 0px; opacity: 1; transition: opacity 1s ease; padding: 10px; } I am curious to find out if this can be achieved ...

javascriptcssreactjsmaterial-ui

Create a div on the right side that expands to occupy all remaining space

Is there a way to have two divs positioned next to each other, with the left one being a fixed width of 300px and the right one taking up the rest of the available space on the screen? I appreciate any guidance you can provide. Thanks! ...

htmlcss

The alignment of text in the btn-check label of Bootstrap is not centered

My checkboxes with btn-check have labels of varying lengths. I want all the labels to be aligned in the middle, but I can't figure out how to do it. The screenshot below illustrates the issue with the first checkbox. The content is not centered in the ...

htmlcsstwitter-bootstrapbootstrap-5

Creating a left sidebar with a menu that appears after clicking an icon in Bootstrap 4

Check out this example photo sidebar Currently seeking a solution to create a sidebar similar to the one shown in the image above. View photo2 for reference When you click on the sidebar icon, a menu will be displayed. I already have something similar ...

htmlcssbootstrap-4