JavaFX make a ListView Scrollable on Touchscreen

we are developing a JavaFX application for a Linux All In One Pc that has a Touchscreen.

The .jar file works and everything is clickable out of the box because JavaFx translates ClickEvents into TouchEvents. The only problem is with a ListView that is not scrollable out of the box...

If I put it inside a ScrollPane then I can Scroll but the ListView inside the ScrollPane does not scroll only the ScrollPane part scrolls.

There are many possible fixxes on how I could manage this:

1. Make the ListView scrollable like the ScrollPane is and remove the scrollpane.

2. Tell the scrollpane to display the ListItems and not to only scroll the pane but the list.

3. Change the ListView VerticalScrollBar to make it bigger and to make the Inc. and Dec Button bigger so the user can just click on there.

I tried to do everything but with no success.

Here is some code:

The Controller where the list lives:

public class AllergenController {
	private final Rectangle2D RESOLUTION = Screen.getPrimary().getBounds();
	private ObservableList<String> items = FXCollections.observableArrayList();

	@FXML
	private ListView<String> listView;

	@FXML
	private Button btnClose;
	
	private ScrollPane pane;
	
	private double lastYposition = 0;
		
	
	public void initialize() {
		
//		listView.setStyle("-fx-min-width: 20; -fx-background-colo: #074cba;");
		
//		listView.getStylesheets().addAll(this.getClass().getResource("application.css").toExternalForm());
		
		
		
//		pane.setFitToWidth(true);
		
//	     listView.setOnMousePressed(new EventHandler<MouseEvent>() {
//	         @Override
//	         public void handle(MouseEvent event) {
//	             lastYposition = event.getSceneY();
//	         }
//	     });
//
//	     listView.setOnMouseDragged(new EventHandler<MouseEvent>() {
//	         @Override
//	         public void handle(MouseEvent event) {
//	             double newYposition = event.getSceneY();
//	             double diff = newYposition - lastYposition;
//	             lastYposition = newYposition;
//	             CustomScrollEvent cse = new CustomScrollEvent();
//	             cse.fireVerticalScroll((int)diff, this, (EventTarget) event.getSource());
//	         }
//	     });  
//		
		
//		ScrollListener scrollListener = new ScrollListener(listView);
//		scrollListener.enable();
	    
		
		listView.setItems(items);
		listView.setSelectionModel(new NoSelectionModel<String>());
		listView.setPrefSize(RESOLUTION.getWidth(), RESOLUTION.getHeight());
//		pane.setPrefSize(RESOLUTION.getWidth(), RESOLUTION.getHeight());
		listView.setStyle("-fx-font-size: 3em; -fx-alignment: center;");
		
		// Allergene
		items.add("Allergenliste: ");
		items.add("1 - Gluten und Erzeugnisse");
		items.add("2 - Krebstiere und Erzeugnisse");
		items.add("3 - Eier von Gefl\u00fcgel und Erzeugnisse");
		items.add("4 - Fisch und Erzeugnisse (Ausser Fischgelatine)");
		items.add("5 - Erdn\u00fcsse und Erzeugnisse");
		items.add("6 - Sojabohnen und Erzeugnisse");
		items.add("7 - Milch (Laktose) und Erzeugnisse");
		items.add("8 - Schalenfr\u00fcchte und Erzeugnisse");
		items.add("9 - Sellerie und Erzeugnisse");
		items.add("10 - Senf und Erzeugnisse");
		items.add("11 - Sesamsamen und Erzeugnisse");
		items.add("12 - Schwefeldioxid und Erzeugnisse");
		items.add("13 - Lupinen und Erzeugnisse");
		items.add("14 - Weichtiere und Erzeugnisse (Schnecken, Muscheln, Tintenfische etc.)");
		items.add("V - Vegetarisch");
		items.add("VV - Vegan");
		items.add("SF - Schweinefleisch");

		// Zusatzstoffe nach E-Nummern sortiert!
		items.add("\n");
		items.add("Zusatzstoffliste nach E-Nummern sortiert: ");
		items.add("E 100 - Kurkumin");
		items.add("E 101 - Riboflavin (Riboflavin-5'-Phosphat)");
		items.add("E 102 - Tartrazin");
		items.add("E 104 - Chinolingelb");
		items.add("E 110 - Gelborange S");
		items.add("E 120 - Echtes Karmin");
		items.add("E 122 - Azorubin");
		items.add("E 123 - Amaranth");
		items.add("E 124 - Cochenillerot");
		items.add("E 127 - Erythrosin");
		items.add("E 129 - Allurarot AC");
		items.add("E 131 - Patentblau V");
		items.add("E 132 - Indigotin I");
		items.add("E 133 - Brilliantblau FCF");
		items.add("E 140 - Chlorophylle, Chlorophylline");
		items.add("E 141 - Kupferkomplexe der Chlorophylle");
		items.add("E 142 - Gr\u00fcn S");
		items.add("E 150a-d - Zuckerkul\u00f6r");
		items.add("E 151 - Brilliantschwarz BN");
		items.add("E 153 - Pflanzenkohle");
		items.add("E 155 - Braun HT");
		items.add("E 160a-f - Carotin und Carotinoide(a)");
		items.add("E 160b - Annatto (Bixin,Norbixin)");
		items.add("E 160c - Paprikaextrakt");
		items.add("E 160d - Lycopin");
		items.add("E 160e - Beta-apo-8'-Carotinal");
		items.add("E 161b - Lutein");
		items.add("E 161g - Canthaxanthin");
		items.add("E 162 - Beetenrot, Betanin");
		items.add("E 163 - Anthocyane");
...

  }
}

Ignore the commented code it was some tries I had before.

then I made a Css class and assigned the StyleSheet inside the ListView but that did not change anything:

/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */


.mylistview .scroll-bar:vertical {
	 -fx-scale-x: 0;
	-fx-min-width: 20px;
	-fx-background-colo: #074cba;
}

.mylistview .increment-button .virtual-flow .scroll-bar:vertical .increment-button , .mylistview .decrement-button {
	-fx-min-width: 20px;
	-fx-min-height: 50px;
}

Here is the FXML Code from the Allergen:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.String?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<BorderPane style="-fx-background-color: #fff;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="KMS.AllergenController">
   <top>
      <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="10.0" BorderPane.alignment="CENTER">
         <children>
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Kantinen Management System by" textAlignment="CENTER">
               <font>
                  <Font size="24.0" />
               </font>
            </Text>
            <ImageView fitHeight="50.0" fitWidth="90.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../images/ThiesenSWChanged.png" />
               </image>
            </ImageView>
         </children>
         <padding>
            <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
         </padding>
      </HBox>
   </top>
   <center>
      <ScrollPane fx:id="pane" hbarPolicy="NEVER" vbarPolicy="NEVER">
         <content>
            <ListView fx:id="listView" focusTraversable="false" style="-fx-background-color: #fff;" stylesheets="@../src/KMS/application.css">
               <styleClass>
                  <String fx:value="scroll-bar" />
                  <String fx:value="decrement-button" />
                  <String fx:value="increment-button" />
               </styleClass>
            </ListView>
         </content>
      </ScrollPane>
   </center>
</BorderPane>

I hope someone can help me :/ like I said it can be done by one of the 3 Ways (1. 2. 3.).

Thanks ~Faded.