How to set the background color of ScrollPane in JavaFX?

Overview

The ScrollPane in JavaFX always have gray background. In this tutorial, we show you how to set the background color of ScrollPane in JavaFX.

Option 1 - Change background color of ScrollPane

If you are using JavaFX Scene Builder 2.0, go to the Style of the Label in the Properties section of the Inspector panel. Set: -fx-background : #8B008B and -fx-border-color: #8B008B

Option 2 - Change background color of ScrollPane

Edit Example.fxml file. Add style="-fx-background: #90EE90; -fx-border-color: #90EE90;" to tag ScrollPane

<ScrollPane fx:id="scrollPaneMain" layoutX="157.0" layoutY="71.0" prefHeight="220.0" prefWidth="300.0" style="-fx-background: #90EE90; -fx-border-color: #90EE90;">

Option 3 - Change background color of ScrollPane

Using javafx.scene.control.ScrollPane.setStyle

 @FXML
    private ScrollPane scrollPaneMain;

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
        scrollPaneMain.setStyle("-fx-background: #90EE90; -fx-border-color: #90EE90;");
    }

Full Source Code

Example.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" fx:id="main" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: #fff;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.jackrutorial.ExampleController">
   <children>
      <ScrollPane fx:id="scrollPaneMain" layoutX="157.0" layoutY="71.0" prefHeight="220.0" prefWidth="300.0">
        <content>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="220.0" prefWidth="280.0">
               <children>
                  <Label alignment="CENTER" prefHeight="30.0" prefWidth="280.0" style="-fx-background-color: #FFFF00;" text="JavaFX" textFill="#a42525" />
               </children>
            </AnchorPane>
        </content>
      </ScrollPane>
   </children>
</AnchorPane>

ExampleController.java

package com.jackrutorial;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ScrollPane;

public class ExampleController implements Initializable {

    @FXML
    private ScrollPane scrollPaneMain;

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
        scrollPaneMain.setStyle("-fx-background: #90EE90; -fx-border-color: #90EE90;");
    }
}

• Tweet
• Share
• Share
• Share
• Share