No horizontal scrollbar for ListView

[barisione]

If I have content which doesn't fit horizontally in a ListView, I would expect a scrollbar to appear (or to make it possible for it to appear with the appropriate overflow-x value).

overflow-y works correctly.

from textual import widgets
from textual.app import App, ComposeResult


class MyApp(App):
    DEFAULT_CSS = """
    ListView {
        height: 10;
        width: 10;
        /* `scroll` means a disable scrollbar appears (like if the widget didn't need to
           scroll). With `auto` then no scrollbar appears. */
        overflow-x: scroll;
        /* This makes the vertical scrollbar disappear which makes me assume that
           `overflow-x` should work as well. */
        overflow-y: hidden;
    }
    """

    def compose(self) -> ComposeResult:
        yield widgets.ListView(id="my-list")

    def on_ready(self) -> None:
        list_view = self.query_one("#my-list", widgets.ListView)
        for i in range(20):
            msg = "".join(str(i) for i in range(10))
            list_view.append(widgets.ListItem(widgets.Label(f"Item #{i}: {msg}")))


MyApp().run()

Textual Diagnostics

Versions

Name	Value
Textual	0.23.0
Rich	13.3.5

Python

Name	Value
Version	3.10.1
Implementation	CPython
Compiler	Clang 13.0.0 (clang-1300.0.29.30)
Executable	/Users/bari/.pyenv/versions/3.10.1/envs/undo-core-venv3.10/bin/python3.10

Operating System

Name	Value
System	Darwin
Release	21.6.0
Version	Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64

Terminal

Name	Value
Terminal Application	iTerm.app (3.5.0beta10)
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=88, height=44
legacy_windows	False
min_width	1
max_width	88
is_terminal	False
encoding	utf-8
max_height	44
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

[willmcgugan]

You will need to give your ListItems a width or they will use the width of the container (i.e. 10).

You should also set your app's css in classvar called CSS (not DEFAULT_CSS) to ensure they override the defaults.

[barisione]

Thank you! Something like this works:

item = widgets.ListItem(widgets.Label(text))
item.styles.min_width = len(text)
list_view.append(item)

Is this the correct way?

For the above to work, overflow-x must be set to auto/scroll as not setting anything means no scrollbar. Is this expected?

If you just added strings, wouldn't you expect the list view to automatically scroll as needed? Would it make sense to have an ListView.append_text method to append text that takes care of everything automatically?

method that does `list_view.append(widgets.ListItem(widgets.Label(

[willmcgugan]

You can set the widget in code, but I prefer to set it via CSS.

The ListView is generally used for things that present like menus, where horizontal scrolling would be a little odd. But you can make it scroll in any way you want.

method to append text that takes care of everything automatically?

It's not clear what it would mean to "take care of everything automatically". You can build anything on top of ListView. There is no single use case which it is catering for.

If you want to display a list of strings, you might want to look at OptionList

[barisione]

OptionList is nice! I didn't realise it existed but seems designed for what I want.

But I cannot get it to scroll horizontally. I tried:

l.add_option(Text("something very long here", no_wrap=True))

And then

OptionList {
    overflow-x: scroll !important;
}

But it doesn't scroll. In the source code for OptionList I see:

self.virtual_size = Size(self.scrollable_content_region.width, len(self._lines))

Does that mean it cannot scroll?

Basically what I need is a list of strings that can sroll both ways (some strings may be very long and it's outside my control). The ability to add separators and have entries spanning multiple lines is a plus.

Thank you again and sorry if any of my questions are stupid!