Modify the CSS styles of inner elements dynamically

Within my code, I have implemented a SplitPane and included a CSS file that contains the following styling rules:

.split-pane > .split-pane-divider {  
    -fx-padding: 0 0 0 1;  
    -fx-background-color:-fx-background;
}

However, during runtime, I encountered the need to modify these styling rules for the divider. I attempted the following solution:

SplitPane.Divider divider = splitPane.getDividers().get(0);
divider.setStyle("-fx-padding: 1 1 1 1; -fx-background-color:-fx-background;");

Unfortunately, I discovered that the method setStyle is not available in the SplitPane.Divider class.

Is there an alternative way to adjust these styling rules dynamically at runtime?

javacssjavafx

Answer №1

To create a unique look for your split pane, you can define custom style classes in your CSS file:

.split-pane > .split-pane-divider {
    -fx-padding: 0 0 0 1;
    -fx-background-color: green;
}

.alternate-split-pane > .split-pane-divider {
    -fx-padding: 1 1 1 1;
    -fx-background-color: red;
}

Then, in your code, you can dynamically add or remove these style classes based on your requirements:

// Apply the customized style
splitPane.getStyleClass().add("alternate-split-pane");
// Revert to the original style
splitPane.getStyleClass().remove("alternate-split-pane")

Another approach is using the PseudoClass API to toggle styles:

.split-pane > .split-pane-divider {
    -fx-padding: 0 0 0 1;
    -fx-background-color: green;
}

.split-pane:version1 > .split-pane-divider {
    -fx-padding: 1 1 1 1;
    -fx-background-color: red;
}

Control the pseudo class state in your code:

PseudoClass version1Pseudo = PseudoClass.getPseudoClass("version1");
splitPane.pseudoClassStateChanged(version1Pseudo, true);
splitPane.pseudoClassStateChanged(version1Pseudo, false);

If needed, you can directly set style attributes during runtime by accessing divider nodes via Node#lookupAll:

for (Node node: splitPane.lookupAll(".split-pane-divider"))
    node.setStyle("-fx-background-color: red; -fx-padding: 1 1 1 1;");

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

What is the best way to extend a column across multiple rows with bootstrap?

https://i.sstatic.net/uPsLe.jpg Looking to convert the design above into HTML and CSS, specifically trying to achieve a layout where the image spans across 2 rows. However, I've been having trouble making it responsive even after trying some code sni ...

htmlcsstwitter-bootstrap

Initiate the printing process by executing the window.print() function. As the document is being

Here's the code snippet : <body> <div class="headerCont noprint"> <div class="headerHold"> <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"> ...

javascripthtmlcssprinting

HTML files do not inherit from other HTML files

I am venturing into the world of VSCode for the first time to create a web application. Starting with the basics, I have an index.html page with a simple "Hello, world!" message. Additionally, I have developed a layout.html file that contains code for a na ...

pythonhtmlcssdjango

Modify the height of one or more <span> elements within a table cell

Is it possible in this scenario to automatically adjust the row height for <span class="orange">ORANGE</span>? And if there are two or more <span> elements, can the cell be split to accommodate varying heights? (You can use: display: tab ...

jqueryhtmlcsscss-tables

Is there a way to display menu items in a list when hovering over the parent element using CSS?

Is it possible to make the code below run when hovering over (#cssmenu ul > li > ul > li ) with the mouse? #cssmenu ul > li > ul > li > ul { right: 1170px; } ...

css

Worldwide Java Type Adapters in MOXy

Can global java type adapters/converters be defined in MOXy (up to the latest release (2.6.0)? These adapters would be automatically applied to all classes registered in the jaxb context unless explicitly overridden. For example, I am interested in addi ...

javajsonjaxbeclipselinkmoxy

Tips for verifying the customization of dropdown options using Selenium WebDriver with Java

I am facing a challenge in my project where I need to determine if dropdown values can be edited using Selenium WebDriver in Java. Can anyone provide a solution for this? I have attempted to use the following code with the sendKeys function, but I encount ...

javaseleniumselenium-webdriverdropdown

Combining REST endpoints with UUIDs into a cohesive business transaction is a feature offered by AppDynamics

I have a web application on JBoss/Wildfly using RESTEasy and monitored with AppDynamics. I set up business transaction detection to use a Java Servlet. While it mostly works, some REST paths include UUIDs, like: /data/scenario/d345d238-e0d2-4e01-a96e-4bf1 ...

javarestjbossresteasyappdynamics

I am having trouble getting my custom CSS file to be applied to my website on Github pages

I attempted to upload a custom CSS file to apply on The raw CSS file is located at: https://raw.githubusercontent.com/themomoravi/SoundOff-Website/master/styles.css I used the following as my href since it directly links to the raw CSS file: href="http ...

htmlcssgithub

Is my Android application utilizing several ClassLoaders or PathClassLoaders concurrently?

I'm encountering some difficulties with ClassLoaders in Android. I suspect that the issue is related to ClassLoaders. The problem arises from a project that makes use of a custom widget library, which we'll refer to as CustomDialogView. This libr ...

javaandroidclassloader

What is the method for changing the background color of the initial row in a RecyclerView within an "Android Application"?

My RecyclerView displays items as rows, with all rows currently having a white background color. I am trying to figure out how to change the background color of the first row to silver while keeping the rest white. Can anyone assist me with this? ...

javaandroidbackgroundrowsandroid-recyclerview

Can an unordered list be nested inside an inline list item in HTML or XHTML?

Take note that the li with child ul is set to display:inline - example code provided below <style type="text/css"> ul.nav_main li { display: inline } ul.nav_submenu li { display: block } </style> <ul class="nav_main"> <li>I ...

htmlcss

Enhance your web forms with jQuery Chosen's automatic formatting feature

Having trouble adding a feature to my multi-select input box using jQuery Chosen. The current functionality allows users to enter custom values not in the list. The new feature should automatically format numbers entered by users, for example: User input ...

javascripthtmlcssbootstrap-4jquery-chosen

Implementing a clickable search icon within a form input field using CSS: a guide

I have added a search icon to the form input field. Check it out here: https://i.sstatic.net/pnv6k.jpg #searchform { position: relative; } #searchform:before { content: "\f118"; font-family: "pharma"; right: 0px; position: absolute; ...

phphtmlcsswordpresssearch

Position icons and images on the right side, and the textarea on the left side of the page (using Twitter

Summary: Here is the desired end result shown in the image below. Alternatively, you can refer to the JSFiddle. Ideally, only CSS should be used without changing the DOM structure. The icons need to be aligned completely to the right using the .pull-right ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Expand the <canvas> element to completely fill the flex item without any scrollbars

I am currently utilizing Bootstrap 5 and experimenting with setting up a nested flex layout that occupies the entire window. One of the flex items should be filled by a "stretchy" canvas element, ensuring there are no scrollbars present. However, when I a ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Employ CSS to target the initial and final items within sets of identical elements

I created the following CSS styles: div { width: 300px; text-align: center; } p:not(.vrt) { text-align: left; } p.vrt { writing-mode: vertical-rl; display: inline-block; } div :nth-child(1 of p.vrt) { margin-left: 0; } div :nth-last-child(1 of ...

cssselection

What is the correct way to effectively target nested elements using CSS?

For a while now, I've been creating websites using HTML and CSS, carefully matching specific tags to my classes or IDs. However, I recently noticed a trend where people use selectors like #test > #blah to indicate that #blah is nested inside of #te ...

htmlcssnested

When a user right-clicks on certain words, the menu opens using JavaScript

Looking to implement a custom context menu that opens when specific words are right-clicked by the user in JavaScript. I have been searching for a solution for quite some time now. The word should be recognized based on an array of specific words. Can some ...

javascripthtmlcss

Is there a way to specify the dimensions of the canvas in my image editing software based on the user-input

Here is the code and link for my unique image editor. I would like to allow users to enter the desired width and height of the selection area. For example, if a user enters a width of 300 and height of 200, the selection size will adjust accordingly. Addit ...

javascriptjqueryhtmlcss