How To Set Background Color Transparent Of ScrollPane In JavaFX?

Overview

In this tutorial, we show you how to set ScrollPane Background Transparent in JavaFX.

Option 1 - ScrollPane Background Transparent

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: transparent and -fx-background-color: transparent;

Option 2 - ScrollPane Background Transparent

Edit Example.fxml file. Add style="-fx-background: transparent; -fx-background-color: transparent;" to tag ScrollPane

<?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="80.0" layoutY="71.0" prefHeight="220.0" prefWidth="420.0" style="-fx-background: transparent; -fx-background-color: transparent;">
        <content>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="220.0" prefWidth="400.0">
               <children>
                  <Label alignment="CENTER" prefHeight="30.0" prefWidth="400.0" style="-fx-background-color: #FFFF00;" text="JavaFX - ScrollPane Background Transparent" textFill="#a42525" />
               </children>
            </AnchorPane>
        </content>
      </ScrollPane>
   </children>
</AnchorPane>

Option 3 - ScrollPane Background Transparent

Using javafx.scene.control.ScrollPane.setStyle

scrollPaneMain.setStyle("-fx-background: transparent; -fx-background-color: transparent; "); 

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="80.0" layoutY="71.0" prefHeight="220.0" prefWidth="420.0">
        <content>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="220.0" prefWidth="400.0">
               <children>
                  <Label alignment="CENTER" prefHeight="30.0" prefWidth="400.0" style="-fx-background-color: #FFFF00;" text="JavaFX - ScrollPane Background Transparent" 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: transparent; -fx-background-color: transparent; ");
    }
}

Demo Background Color Transparent In JavaFX

• Tweet
• Share
• Share
• Share
• Share