8 Replies Latest reply: Jun 21, 2012 12:54 AM by Marcello RSS

    ScrollPane scrollbar size


      Is there way to scale or change the scrollbar size of the ScrollPane. My app is used via touch screen so it could be bigger.

      Or is there any other suggestions to solve this. The best solution would probably be that one can swipe the whole scrollpane but this is not quick solution?


        • 1. Re: ScrollPane scrollbar size
          Richard Bair-Oracle
          2.2 has touch support built in, so you should get swipe events for the whole scroll pane. But if you want to adjust the scroll bars (usually on touch we go the apple route and hide them in our demos since swipe support is used for scrolling) you can do it from CSS. Extract the caspian.css file from jfxrt.jar and you can check out how we styled the scroll bars and then write your own styles to use to make them look how you want. Generally the default width/height of most components is just the factor of their natural content (text font size) + padding. So adjusting the left/right padding on a vertical scrollbar or top/bottom padding on a horizontal scrollbar should resize it to your liking.
          • 2. Re: ScrollPane scrollbar size
            David Grieve
            Play with the -fx-padding style on the .scroll-bar style class
             .scroll-bar { -fx-padding: 5px; }
            • 3. Re: ScrollPane scrollbar size
              Like Richard said, check out caspian.css.

              Something like the css below made the scroll bars wider.

              .scroll-bar .increment-button {
              -fx-padding: 0.75em;

              .scroll-bar .decrement-button {
              -fx-padding: 0.75em;
              • 4. Re: ScrollPane scrollbar size
                Thanks to all you three for quick answers, got it working!

                Good to know that 2.2. will support swipe effects so will change to that in the future. For now the wider scroll-bar is just what I needed.

                • 5. Re: ScrollPane scrollbar size
                  Hi, could you show me how you have realized this ?


                  • 6. Re: ScrollPane scrollbar size
                    I don't think you could do this via setStyle.
                    It's not a style on the scrollpane, it is a styleclass.
                    Define an appropriate styleclass in a custom css stylesheet and apply the stylesheet to your scene.
                    There are some examples of scrollbar customization here: https://gist.github.com/2838292
                    • 7. Re: ScrollPane scrollbar size
                      Well I tried with 2.2b13 and did find a way to do this via setStyle via manipulating font sizes.
                      Seems to work because the size of the scroll bars depends on the font size of the ScrollPane.
                      Doing something via styleclasses with padding as in the earlier suggestions may perhaps be better.
                      import java.io.IOException;
                      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 ScrollTest extends Application {
                        @Override public void start(Stage stage) throws IOException {
                          // create a chart.
                          ObservableList<PieChart.Data> pieChartData =
                              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);
                          // create a scrollpane.
                          ScrollPane scrollPane = new ScrollPane();
                          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));
                        public static void main(String[] args) { launch(args); }
                      • 8. Re: ScrollPane scrollbar size
                        Thanks, that worked