JavaFX Change ScrollPane ViewPort background color - javafx

Question

I need to change the gray background color of the ScrollPane so where you see WHITE and BOLD Labels i want the background to be white.
Image from the Application.
Code:
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.CheckMenuItem;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.control.MenuItem;
import javafx.scene.control.RadioMenuItem;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.SeparatorMenuItem;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;
public class MainApp extends Application {
private static final int WINDOW_WIDTH = 800;
private static final int WINDOW_HEIGHT = 200;
private String family = "Helvetica";
private TextFlow textFlow = new TextFlow();
#Override
public void start(Stage stage) {
HBox hbox = new HBox();
Group group = getGroup();
hbox.getChildren().add(group);
hbox.setAlignment(Pos.TOP_LEFT);
hbox.getStyleClass().add("hbox");
MenuBar menuBar = new MenuBar();
menuBar.prefWidthProperty().bind(stage.widthProperty());
// File menu - new, save, exit
Menu fileMenu = new Menu("File");
MenuItem newMenuItem = new MenuItem("New");
MenuItem saveMenuItem = new MenuItem("Save");
MenuItem exitMenuItem = new MenuItem("Exit");
exitMenuItem.setOnAction(actionEvent -> Platform.exit());
fileMenu.getItems().addAll(newMenuItem, saveMenuItem,
new SeparatorMenuItem(), exitMenuItem);
Menu webMenu = new Menu("Web");
CheckMenuItem htmlMenuItem = new CheckMenuItem("HTML");
htmlMenuItem.setSelected(true);
webMenu.getItems().add(htmlMenuItem);
CheckMenuItem cssMenuItem = new CheckMenuItem("CSS");
cssMenuItem.setSelected(true);
webMenu.getItems().add(cssMenuItem);
Menu sqlMenu = new Menu("SQL");
ToggleGroup tGroup = new ToggleGroup();
RadioMenuItem mysqlItem = new RadioMenuItem("MySQL");
mysqlItem.setToggleGroup(tGroup);
RadioMenuItem oracleItem = new RadioMenuItem("Oracle");
oracleItem.setToggleGroup(tGroup);
oracleItem.setSelected(true);
sqlMenu.getItems().addAll(mysqlItem, oracleItem,
new SeparatorMenuItem());
Menu tutorialManu = new Menu("Tutorial");
tutorialManu.getItems().addAll(
new CheckMenuItem("Java"),
new CheckMenuItem("JavaFX"),
new CheckMenuItem("Swing"));
sqlMenu.getItems().add(tutorialManu);
menuBar.getMenus().addAll(fileMenu, webMenu, sqlMenu);
ScrollPane scrollPane = new ScrollPane(hbox);
scrollPane.setFitToHeight(true);
scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.ALWAYS);
BorderPane root = new BorderPane(scrollPane);
root.setPadding(new Insets(15));
root.setTop(menuBar);
//root.setCenter(hbox);
Scene scene = new Scene(root, WINDOW_WIDTH, WINDOW_HEIGHT);
//scene.getStylesheets().add("layoutstyle.css");
stage.setTitle("Dummy Title");
stage.setScene(scene);
stage.show();
Text text3 = new Text("\nDummy text");
text3.setFont(Font.font(family, 22));
textFlow.getChildren().add(text3);
}
private Group getGroup(){
double size = 50;
textFlow = new TextFlow();
textFlow.setLayoutX(40);
textFlow.setLayoutY(40);
Text text1 = new Text("White");
text1.setFont(Font.font(family, size));
text1.setFill(Color.RED);
Text text2 = new Text("\nBold");
text2.setFill(Color.ORANGE);
text2.setFont(Font.font(family, FontWeight.BOLD, size));
Text text3 = new Text("\n World");
text3.setFill(Color.GREEN);
text3.setFont(Font.font(family, FontPosture.ITALIC, size));
textFlow.getChildren().addAll(text1, text2, text3);
return new Group(textFlow);
}
public static void main(String[] args) {
launch(args);
}
}

Answer 1

You have to modify the .viewport color of the ScrollPane with css:
CSS code:
/*The ViewPort of the ScrollPane */
.scroll-pane .viewport {
-fx-background-color: white; /*or whatever you want*/
}
.scroll-pane {
-fx-background-color:transparent;
}
And change these lines of code from your application:
//........
//.........
root.setPadding(new Insets(15));
root.setTop(menuBar);
//root.setCenter(hbox);
Scene scene = new Scene(root, WINDOW_WIDTH, WINDOW_HEIGHT);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
stage.setTitle("Dummy Title");
stage.setScene(scene);
stage.show();
//........
//.........
Finally mention that the css file which contains the css code,in this example has to be in the same source folder as the Application.java file.

Answer 2

I guess your question is, how to apply a white background?
via css-style (an entry in your css-File would be better for that):
root.setStyle("-fx-background-color:white");
menuBar.styleProperty().bind(root.styleProperty());
via api
Background background = new Background(new BackgroundFill(Color.WHITE, CornerRadii.EMPTY, Insets.EMPTY));
root.setBackground(background);
menuBar.setBackground(background);