ScrollableContainer not scrolling on mouse wheel events

[philippeflorent]

Hi

I have a custom component and having its content scrolled is not working no matter what

I see the scroll messages in the log, but nothing scrolls

I tried bubbling the events but it does not work

thanks for you help

styles

.panel-body {
    overflow-y: auto;
    height: 1000fr;
    width: 1fr;
}

code

from textual.app import ComposeResult
from textual.containers import Vertical, ScrollableContainer
from textual.widgets import Static
from textual.events import MouseScrollUp, MouseScrollDown, Click
from rich.text import Text
import logging

class TitledPanel(Vertical):
    def __init__(self, title: str, logger: logging.Logger, **kwargs):
        super().__init__(**kwargs)
        self.title = title
        self.logger = logger
        self.is_selected = False
        self.content = "\n".join(str(i) for i in range(100))

    def compose(self) -> ComposeResult:
        yield Static(self.title, classes="panel-title")
        
        self.inner_static = Static(Text(self.content), classes="panel-body")
        
        self.content_widget = ScrollableContainer(self.inner_static)
        yield self.content_widget

    def on_mount(self):
        # Cache references to the children widgets for quick updates
        self.title_widget = self.query_one(".panel-title", Static)
        self.inner_static = self.query_one(".panel-body", Static)
        self.content_widget = self.query_one(ScrollableContainer)
        self.content_widget.can_focus = True
        self.content_widget.focus()

    def on_mouse_scroll_up(self, event: MouseScrollUp) -> None:
        self.logger.info(f"Scrolled up on {self.title}")
        self.content_widget.scroll_up()
        event.stop()  # prevent further propagation

    def on_mouse_scroll_down(self, event: MouseScrollDown) -> None:
        self.logger.info(f"Scrolled down on {self.title}")
        self.content_widget.scroll_down()
        event.stop()  # prevent further propagation

    def on_click(self, event: Click) -> None:
        self.logger.info(f"Clicked on {self.title} at {event.x}, {event.y}")

    def select(self, selected):
        self.is_selected = selected
        if selected:
            self.logger.info(f"{self.title} selected")
            self.title_widget.add_class("selected")
        else:
            self.logger.info(f"{self.title} unselected")
            self.title_widget.remove_class("selected")

log

textual.__version__='7.4.0'
Panel 1 selected
Clicked on Panel 1 at 15, 11
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled up on Panel 1
Scrolled up on Panel 1
Scrolled up on Panel 1
Scrolled up on Panel 1
Scrolled up on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1
Scrolled down on Panel 1

[philippeflorent]

arf, found it

I emptied the css and now it works

[its-alikhokher]

Scrolling isn't blocked. There's simply nothing to scroll: height: 1000fr on .panel-body makes the Static exactly as tall as the visible area of the ScrollableContainer, so the container never overflows. The 100 lines are clipped inside the Static instead.

I reproduced it with run_test() (Textual 8.2, same layout):

.panel-body CSS	container max_scroll_y	after 5 wheel-downs
overflow-y: auto; height: 1000fr; width: 1fr;	0	scroll_y = 0
height: auto;	81	scroll_y = 10

So let the content size itself:

.panel-body { height: auto; }

ScrollableContainer is already height: 1fr with overflow: auto auto by default. After this change you can also remove the on_mouse_scroll_up/down handlers, because ScrollableContainer scrolls on the mouse wheel by itself.