Enabling horizontal scroll in a ListView

[dlalaj]

I am struggling to find a way to enable a horizontal scrollbar for the following declaration of a ListView I have:

class ImageView(ListView):

    def __init__(self, *children, initial_index = 0, name = None, id = None, classes = None, disabled = False):
        super().__init__(*children, initial_index=initial_index, name=name, id=id, classes=classes, disabled=disabled)
        self.images = []

    def _on_mount(self) -> None:
        return self._refresh()

    def _refresh(self):
        # Method to be used in many scenarios to enable a refresh based on an external API provided from the list_images function
        self.clear()
        self.images: list[ImageRepr] = list_images()      # API call to update list dynamically

        for image in self.images:
            # An image label is formatted like so: `<RELEASE> -- <SERIAL> -- <FINGERPRINT>`
            pretty_label = f"{image.release} -- {image.serial} -- {image.fingerprint}"
            self.append(ListItem(Label(pretty_label)))

In my styles CSS, I have tried using overflow-x for my ListView which brings the black scrollbar at the bottom as in the image shown below but does not actually enable the scrollable bar despite the fact the fingerprints are surely overflowing.

Am I missing something about how ListView works? For context if my CSS defines the overflow for the ListItem class that composes the ListView I end up with a scrollbar under each listing. I suspect it might be related to styling of the ListItem fitting inside the ListView since the content inside the ListItem are able to trigger the scrollbar

[willmcgugan]

Your ListItem's aren't overflowing. Overflow occurs when a container's children don't fit inside the container. Try setting overflow on the ListView.

If you need further help, please write an MRE.

[TomJGooding]

I think you just need to set the ListItem width to auto, as it is 1fr by default. Here's a minimal example:

EDIT: Actually, the problem with this is that unless your items are all the same width, the highlighting for the current item will be different widths...

from textual.app import App, ComposeResult
from textual.widgets import Label, ListItem, ListView


class ExampleApp(App):
    CSS = """
    Screen {
        align: center middle;
    }

    ListView {
        width: 80;
        height: 24;

        overflow-x: auto;

        & > ListItem {
            width: auto;
        }
        
    }
    """

    def compose(self) -> ComposeResult:
        yield ListView(
            *[ListItem(Label("This is a long label! " * 10)) for _ in range(50)],
        )


if __name__ == "__main__":
    app = ExampleApp()
    app.run()

[dlalaj]

Thank you, this seems to have solved it. I had attempted to set the width for ListItem to auto as below without nesting it under the rules for ListView but that alone did not work. I need to review CSS syntax rules.

ListItem {
    width: auto;
}