How to scale Label within a ListView in JavaFX

Question

I have a ListView with some Labels in it. The labels' width property is bound to the width property of the ListView but they seem to be slightly larger meaning that a horizontal scrollbar is shown on the list view. What I want is to fit the labels in the list view without the scrollbar on the bottom. I have looked at various padding and insets values on both the label and the list view but none I have found are the culprit (most are zero).

Here is an example which demonstrates the problem.

import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.stage.Stage;

public class ListViewScrollExample extends Application {

   private ListView<Node> listView;

   @Override
   public void start(Stage stage) throws Exception {
       listView = new ListView<>();
       addItem("Some quite long string to demonstrate the problem");

       Scene scene = new Scene(listView);
       stage.setScene(scene);
       stage.show();
    }

    public void addItem(String item) {
        Label label = new Label(item);
        label.setWrapText(true);
        label.maxWidthProperty().bind(listView.widthProperty());
        listView.getItems().add(label);
    }

    public static void main(String[] args){
        Application.launch(args);
    }

}

Answer 1

The default CSS file adds padding to a ListCell (line 2316 in the current release):

.list-cell {
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
}

It generally a bad idea to use Node instances as the data backing a ListView: you should use String in this example, and use the cell factory to create a label displaying the string that is configured as you need. The following seems to work for your example:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Scene;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.stage.Stage;

public class ListViewScrollExample extends Application {

   private ListView<String> listView;

   @Override
   public void start(Stage stage) throws Exception {
       listView = new ListView<>();
       listView.getItems().add("Some quite long string to demonstrate the problem");

       listView.setCellFactory(lv -> {
           ListCell<String> cell = new ListCell<String>() {

               private Label label = new Label();
               {
                   label.setWrapText(true);
                   label.maxWidthProperty().bind(Bindings.createDoubleBinding(
                           () -> getWidth() - getPadding().getLeft() - getPadding().getRight() - 1, 
                           widthProperty(), paddingProperty()));
                   setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
               }

               @Override
               protected void updateItem(String item, boolean empty) {
                   super.updateItem(item, empty);
                   if (empty) {
                       setGraphic(null);
                   } else {
                       label.setText(item);
                       setGraphic(label);
                   }
               }
           };
           return cell ;
       });

       Scene scene = new Scene(listView);
       stage.setScene(scene);
       stage.show();
    }


    public static void main(String[] args){
        Application.launch(args);
    }

}

Here I created a list cell that displays a label as its graphic, with the text of the label set to the string to be displayed. The constructor for the cell binds the label's max width to the width of the cell, less any space required for padding. The call to setContentDisplay(ContentDisplay.GRAPHIC_ONLY) appears necessary, so the cell doesn't try to allocate any space for text.

It may be possible to do this by setting the text directly on the list cell and calling setWrapText(true) on the cell (which is, after all, also a subclass of Labeled), but I couldn't get it to work this way.

Answer 2

I couldn't replicate the problem but you can try the following instead of label.maxWidthProperty().bind(listView.widthProperty());

double i = Double.parseDouble(listView.widthProperty().toString());
label.setMaxWidth((i-2.0));

You can change the 2.0 to any pixel count you need to alter the screen by.