Styling JavaFX ChoiceDialog with CSS

I'm currently struggling with customizing the appearance of a ChoiceDialog in my JavaFX application using CSS. While I've successfully applied styles to other dialog panes, it seems that the ChoiceDialog is not responding as expected, possibly due to unfamiliar elements.

My goal is to override the modena css and modify the look of the ChoiceDialog. I have attempted different CSS configurations, such as:

.dialog-pane {
-fx-background-color: black;
}

.dialog-pane .label {
-fx-text-fill: white;
}

.dialog-pane:header .header-panel {
-fx-background-color: black;
}

.dialog-pane:header .header-panel .label {
-fx-font-style: italic;
-fx-font-size: 2em;
}

I also tried:

.choice-dialog .dialog-pane {
-fx-background-color: black;
}

.choice-dialog .dialog-pane .label {
-fx-text-fill: white;
}

.choice-dialog .dialog-pane:header .header-panel {
-fx-background-color: black;
}

.choice-dialog .dialog-pane:header .header-panel .label {
-fx-font-style: italic;
-fx-font-size: 2em;
}

I've experimented with several variations of these CSS rules but haven't achieved the desired results so far. Additionally, I attempted to change the icon displayed on the ChoiceDialog without success:

.choice-dialog.dialog-pane {
-fx-graphic: url("dialog-warning.png");
}

However, none of these modifications seem to have any effect. I recently cleared my custom CSS file and retried the mentioned configurations, but only the DialogPane's appearance was altered, not the ChoiceDialog itself.

Below is how I created the ChoiceDialog:

ChoiceDialog<String> dialog = new ChoiceDialog<>("district", choices);
dialog.setTitle("Object Selection");
dialog.setHeaderText("Which object should the file inherit from?");
dialog.setContentText("Default Object:");

Stage dialogStage = (Stage) dialog.getDialogPane().getScene().getWindow();
dialogStage.getIcons().add(icon);
dialogStage.initOwner(stage);

Optional<String> response = dialog.showAndWait();
response.ifPresent(chosen ->
{
    //It does something...
});

In another instance, I utilized this code to create a different type of dialog:

Dialog<ObservableList<DataFilter>> dialog = new Dialog<>();
dialog.getDialogPane().setPrefSize(620, 430);
dialog.setTitle("Field Filter");
dialog.getDialogPane().getButtonTypes().addAll(save_bt, cancel_bt);
dialog.initOwner(stage);
dialog.setResultConverter((ButtonType b) ->
{
    if (b == save_bt)
    {
        return FXCollections.observableArrayList(dataFilters);
    }
    return null;
 });

 Stage stage = (Stage) dialog.getDialogPane().getScene().getWindow();
 stage.getIcons().add(icon);

Answer №1

It took me about an hour of experimenting to figure this out. There are a few other selectors located in modena.css under "STYLES FOR THE DEFAULT LISTVIEW-BASED COMBOBOX"

.dialog-pane{
-fx-background-color: #7160DC;
   }
 .dialog-pane > *.button-bar > *.container{
 -fx-background-color: #7160DC;
  }
  .dialog-pane > .content .label{
  -fx-font-size: 15px;
  -fx-font-weight: bold;
   -fx-text-fill: orange;
   }
  .dialog-pane:header .header-panel{
   -fx-background-color: #9589DF;
    }
    .dialog-pane:header .header-panel .label{
    -fx-font-size: 18px;
    -fx-font-style: italic;
     }

   .button{
    -fx-background-color:black;
    -fx-text-fill:white;
    }

  .button:hover{     
  -fx-background-color:orange;
   -fx-text-fill:black;
   -fx-font-weight:bold; 
   }

   /* styles background of cover choice*/
   .combo-box {
  -fx-background-color: black;
  -fx-font-weight: bold;
   }
  /* styles text of cover choice*/
  .combo-box > .list-cell {
  -fx-text-fill: yellow;
  }

 .combo-box-popup > .list-view {
-fx-background-color:black;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
 }

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet >  .list-cell {
-fx-padding: 4 0 4 5;
-fx-background: black;
}

.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet   
> .list-cell:filled:hover {
-fx-background-color: orange;
 -fx-text-fill: black;
 }

 //add the above .css file as stylesheet

ChoiceDialog dialog = new ChoiceDialog();
    dialog.setTitle("Confirmation");
    dialog.setContentText("Some Text");
    DialogPane dp = dialog.getDialogPane();
    dp.getStylesheets().add(getClass().getResource("myCssFile.css")
    .toExternalForm());
    Optional<String> result = dialog.showAndWait(); 

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 method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

Tips on adding space between a material icon and its corresponding description

I have a design that needs some adjustments. The material icon is too close to the description, and I attempted to create padding by adding the following CSS: .location-secondary-info span:first-child { padding-right: 5px; } However, this change did no ...

Establishing Fixed Positioning

I'm currently working on fixing the position of an image at the top of a mobile view page. .fixed { position: fixed; } This is specifically for use with Ionic. <div class="item item-image polygon"> <img src="http://urbanetradio ...

Creating a virtual roulette wheel with JavaScript

I'm currently working on creating a roulette wheel using JavaScript. While researching, I came across this example: , but I wasn't satisfied with the aesthetics. Considering that my roulette will only have a few options, I was thinking of using ...

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...

What are the steps to modify the text color in WKWebView?

I've customized my ViewController to include a WKWebView, where I load my content from both .html and .css files. The result resembles a controller for reading books within the Apple Books app. do { guard let filePath = Bundle.main.path(fo ...

Position the text in the exact center of an HTML element using absolute positioning

Hey there! I am currently working on a website and I'm trying to create a simple delete button that can be used throughout the site. However, I'm having trouble getting it positioned correctly... Here's what I have so far: <button id="c ...

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...

Switching effortlessly between Fixed and Relative positioning

As I work on creating a unique scrolling experience, I aim to have elements stop at specific points and animate before returning to normal scroll behavior once the user reaches the final point of the page. Essentially, when div X reaches the middle of the ...

Creating a unified border style for both <p> and <ul> tags in HTML5

Is there a way to have both paragraphs and unordered lists contained within the same border? I initially thought I could achieve this by placing the list inside the paragraph tag, but that does not seem to work. Below is a snippet of my external style sh ...

What is the process for setting up a banner on one page that will automatically be reflected on all other pages?

Is there a way to have a banner in a div and display it on the home page so that it automatically appears on all other pages without needing to place the code on each page individually? Any assistance would be greatly appreciated :) ...

Delete the float attribute from the image when the inline-block is shifted to the bottom of the image

I have three elements in my design - a title, a paragraph, and an image. I want the image to float to the right, with the title and paragraph floating to the left and bottom, resembling "Image 1." To prevent the title from wrapping when narrowing the oute ...

Trouble with CSS styling arising when launching the MVC application on IIS

Currently working on a website in ASP.Net MVC 5. I am trying to test it on my local IIS (version 8), but encountering an issue where the CSS styling is not being applied. In my _layout.cshtml file, I opted for direct link tags instead of using bundles. &l ...

move position when clicked-javascript animation

Is there a way to create a button that changes a div's position with a 2-second transition on the first click and then returns it back on the second click? I tried implementing this code, but unfortunately, it doesn't bring the div back. va ...

Blend a background image using rgba without incorporating a gradient effect

Can you merge a background image with an rgba color without resorting to an rgba gradient? My current CSS3 style appears as follows: html { background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../icons/sombrero.jpg")no-repe ...

Troubleshooting: Bootstrap interfering with external CSS file and causing errors

Attempting to utilize Bootstrap for the design of my website, I encountered an issue when trying to implement an external CSS file named "mycss.css". Unfortunately, it seems to not be functioning properly at all. Both the file, "mycss.css" and index.php ar ...

CSS positioning with absolute value + determine the number of elements positioned above

Is it feasible to adjust the position of an absolutely positioned element based on the height of the element above it? The objective is to align elements with the class "pgafu-post-categories" one line above an H2 heading, even when the lengths v ...

Is it possible to create an input field exclusively for tags using only CSS?

I am currently facing some limitations with a website I am managing. Unfortunately, I do not have the ability to incorporate additional libraries such as custom jQuery or JavaScript scripts. My goal is to customize an input field for tags so that when us ...

It seems that using the SVG <mask> tag is necessary for Firefox to display correctly, but it causes issues with CSS mask in

I need assistance with masking content using an external SVG image. Currently, I'm using the following code: #homepage-banner .desktop-slider.masked { -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */ mask: ur ...

I have a flex box with an image and text line inside. How can I adjust the width of the box and text to automatically match the size of the image?

Consider the code snippet below: <style> .img_box { display: flex; } </style> <div class=img_box> <img src=img/> <div>Title text of varying length. It may exceed the image's width or be smaller.</div> & ...