This discussion is archived
8 Replies Latest reply: Jun 20, 2012 10:54 PM by Marcello RSS

ScrollPane scrollbar size

870239 Newbie
Currently Being Moderated
Hi,

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?

BR,

Kasperi
  • 1. Re: ScrollPane scrollbar size
    RichardBair Journeyer
    Currently Being Moderated
    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 Pro
    Currently Being Moderated
    Play with the -fx-padding style on the .scroll-bar style class
     .scroll-bar { -fx-padding: 5px; }
  • 3. Re: ScrollPane scrollbar size
    ytw Explorer
    Currently Being Moderated
    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
    870239 Newbie
    Currently Being Moderated
    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.


    BR,
    Kasperi
  • 5. Re: ScrollPane scrollbar size
    Marcello Newbie
    Currently Being Moderated
    Hi, could you show me how you have realized this ?

    scrollPane.setStyle(....

    Thanks
  • 6. Re: ScrollPane scrollbar size
    jsmith Guru
    Currently Being Moderated
    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
    jsmith Guru
    Currently Being Moderated
    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 =
          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); }
    }
  • 8. Re: ScrollPane scrollbar size
    Marcello Newbie
    Currently Being Moderated
    Thanks, that worked

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points