overlay style removes the neighboring margin

[TomJGooding]

The overlay style (added in Textual v0.24.0) is still undocumented, so I'm not sure if this is a bug or I've misunderstood how the overlay should work.

Here's a minimal example. After typing in the input to show the overlay, the top margin of the button below will disappear:

from textual.app import App, ComposeResult
from textual.widgets import Button, Input, Static


class MyOverlay(Static):
    DEFAULT_CSS = """
    MyOverlay {
        display: none;
        overlay: screen;
        background: $error;
    }
    """


class ExampleApp(App):
    CSS = """
    Button {
        margin: 2;
    }
    """

    def compose(self) -> ComposeResult:
        yield Input(placeholder="Type to show the overlay...")
        yield MyOverlay("This overlay removes the margin?")
        yield Button("Submit", variant="success")

    def on_input_changed(self, event: Input.Changed) -> None:
        self.query_one(MyOverlay).display = bool(event.value)


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

[github-actions]

Thank you for your issue. Give us a little time to review it.

PS. You might want to check the FAQ if you haven't done so already.

This is an automated reply, generated by FAQtory

[willmcgugan]

This is because the margin overlaps with the previous widget in the DOM. When you make the overlay visible, it makes the previous widget the overlay, rather than the Input.

It's possible we can be a little smarter than this re margins. In the meantime, you could put your Input + Overlay inside a container. That should give the effect you are looking for,

[willmcgugan]

It doesn't look easy to handle this transparently. Putting the Input and Overlay in a VerticalGroup seems like a workable solution. Closing as I think this is good enough for now.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.