4

I am trying to figure out how to change a scrollpanes scrollbar size to make it wider in javafx 2.1.

user16380
  • 383
  • 1
  • 3
  • 7

2 Answers2

5

The ScrollBar width is based on the font size of the ScrollPane.

Set the font size of the ScrollPane to something big and (if needed) sent the font size of your the ScrollPane's content node back to something normal.

ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(content);
scrollPane.setStyle("-fx-font-size: 40px;");  // set the font size to something big.
content.setStyle("-fx-font-size: 11px;");     // reset the region's font size to the default.

Here is a complete executable example based on my answer to a previous forum question on the same topic.

import javafx.application.Application;
import javafx.collections.*;
import javafx.scene.*;
import javafx.stage.Stage;
import javafx.scene.chart.*;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.Region;

public class BigScrollBars extends Application {
  @Override public void start(Stage stage) {
    // create a chart.
    ObservableList<PieChart.Data> pieChartData =
      FXCollections.observableArrayList(
        new PieChart.Data("Grapefruit", 13),
        new PieChart.Data("Oranges", 25),
        new PieChart.Data("Plums", 10),
        new PieChart.Data("Pears", 22),
        new PieChart.Data("Apples", 30)
      );
    final PieChart chart = new PieChart(pieChartData);
    chart.setTitle("Imported Fruits");
    chart.setMinSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
    chart.setPrefSize(800,600);

    // create a scrollpane.
    ScrollPane scrollPane = new ScrollPane();
    scrollPane.setContent(chart);
    scrollPane.setStyle("-fx-font-size: 40px;");  // set the font size to something big.
    chart.setStyle("-fx-font-size: 11px;");       // reset the region's font size to the default.

    // show the scene.
    stage.setScene(new Scene(scrollPane, 400, 300));
    stage.show();
  }

  public static void main(String[] args) { launch(args); }
}
jewelsea
  • 150,031
  • 14
  • 366
  • 406
  • Doesn't seem to work anymore. ScrollPane font size increase alone works, but setting an internal TableView's font size to default undoes the fix... – Manius Jul 27 '18 at 22:31
  • 1
    I guess there could be issues when you mix multiple control types. This solution is just for a stand-alone scroll pane, not something which includes a TableView as I guess TableView has its own CSS rules which, unfortunately, may not play well with the solution outlined here. – jewelsea Jul 27 '18 at 23:28
  • Other solution which setsPrefWidth/Height based on a style class lookup still works nicely. Not pretty but better than nothing. – Manius Jul 27 '18 at 23:38
2

The following solution worked for me:

    @FXML
    private ScrollPane myScrollPane;

    // Where you need in your code do the following:
    Set<Node> nodes = myScrollPane.lookupAll(".scroll-bar");
    for (final Node node : nodes) {
        if (node instanceof ScrollBar) {
            ScrollBar sb = (ScrollBar) node;
            if (sb.getOrientation() == Orientation.VERTICAL) { // HORIZONTAL is another option.
                sb.setPrefWidth(40); // You can define your preferred width here.
            }
        }
    }
croset3
  • 73
  • 8