Geek Answers Handbook

Javafx: How to limit cell width to ListView width

We fought it.

I would like the list cells to be limited by the width of the parent ListView, and dots with ellipses would be displayed for the containing text if the text was cropped / overlapped.

But no matter what I do, the width of all cells grows to the length of the longest text in these cells. And the text in the bypass cell (s) is "clipped", and not what I want, these are dots with ellipses.

My ListView is defined in the fxml file:

<BorderPane fx:id="listViewResultsParentPane">
    <center>
        <ListView fx:id="listViewResults"/>
    </center>
</BorderPane>

And I have a list cell class:

public class ResultsListCell extends ListCell<ResultsListItem> {
    @Override
    public void updateItem(final ResultsListItem item, final boolean empty) {
        super.updateItem(item, empty);
        if(empty || item == null){
            setText("");
        } else {
            setText(item.title);
            setTextOverrun(OverrunStyle.ELLIPSIS);
            setEllipsisString("...");
        }
    }
}

And to get rid of the horizontal scrollbar, I use this css:

.list-view#listViewResults .scroll-bar:horizontal .increment-arrow,
.list-view#listViewResults .scroll-bar:horizontal .decrement-arrow,
.list-view#listViewResults .scroll-bar:horizontal .increment-button,
.list-view#listViewResults .scroll-bar:horizontal .decrement-button {
    -fx-padding:0;
}

To set / limit cell width, I tried:

  • Setting the width of each cell to the width of the parent, in the call to updateCell.
  • Binding prefHeight and maxHeight properties of each cell to the cell of the parent
  • maxHeight prefHight css 100%

.

+4
2

, , . :

prefWidthProperty().bind(list.widthProperty().subtract(2));
setMaxWidth(Control.USE_PREF_SIZE);

CSS . , ListView , . , , .

application example

import javafx.application.Application;
import javafx.collections.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.stage.Stage;

public class ElidedListView extends Application {
    @Override
    public void start(Stage stage) {
        ListView<String> list = new ListView<>();
        ObservableList<String> items = FXCollections.observableArrayList(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                "Aenean nibh ipsum, semper nec ipsum quis, dignissim gravida arcu.",
                "Sed posuere auctor magna vel suscipit.",
                "Aenean eu diam at dolor auctor porta.",
                "Integer tincidunt ex metus, in euismod velit facilisis in.",
                "Praesent purus mi, mattis rutrum egestas vitae, elementum vel dolo"
        );
        list.setItems(items);
        list.setCellFactory(param -> new ListCell<String>() {
            {
                prefWidthProperty().bind(list.widthProperty().subtract(2));
                setMaxWidth(Control.USE_PREF_SIZE);
            }
            @Override
            protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);

                if (item != null && !empty) {
                    setText(item);
                } else {
                    setText(null);
                }
            }
        });

        stage.setScene(new Scene(list));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
+9

0. , , . , / . ( , )

list.setCellFactory(l -> new ListCell<String>() {
    { // constructor
        setPrefWidth(0); // avoids the issues
    }

    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);
        // do whatever you like
    }
});
0

More articles:


All Articles