Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Are inherited multi-part styles working as intended? #3945

Open
davep opened this issue Jan 2, 2024 · 1 comment
Open

Are inherited multi-part styles working as intended? #3945

davep opened this issue Jan 2, 2024 · 1 comment
Labels
question Further information is requested Task

Comments

@davep
Copy link
Contributor

davep commented Jan 2, 2024

This is one I run into now and again with my own apps, and I keep meaning to check if this is intended behaviour, or if this is a bug. Consider this code:

from textual.app import App, ComposeResult
from textual.containers import Container
from textual.widgets import Label

class LotsOfPadding(Container):

    DEFAULT_CSS = """
    LotsOfPadding {
        border: dashed blue;
        padding: 7;
    }
    """

class NoLeftPadding(LotsOfPadding):

    DEFAULT_CSS = """
    NoLeftPadding {
        padding-left: 0;
    }
    """

class NoRightPadding(LotsOfPadding):

    DEFAULT_CSS = """
    NoRightPadding {
        padding-right: 0;
    }
    """

class PartialStylingApp(App[None]):

    CSS = """
    Label {
        width: 1fr;
        height: 1fr;
        background: red;
        border: solid white;
    }
    """

    def compose(self) -> ComposeResult:
        yield LotsOfPadding(Label("This should be 10 all round"))
        yield NoLeftPadding(Label("This should have no padding to the left"))
        yield NoRightPadding(Label("This should have no padding to the right"))

if __name__ == "__main__":
    PartialStylingApp().run()

The idea is that there's a container that has a padding value, which is inherited by any container that inherits from it. There are a couple of containers that do inherit from it, and they seek to make the padding a little more specific by use of padding-left and padding-right (in each case removing the padding on one particular side). It feels like a reasonable expectation that padding-left (for example) means "whatever all the current padding-* values are, with this applied on top.

In other words, my expectation would be that the above code ends up looking like this:

Screenshot 2024-01-02 at 15 34 49

what actually happens though is I get this:

Screenshot 2024-01-02 at 15 35 22

with the padding-left and padding-right removed from the child containers, we can see that the padding is inherited from the parent:

Screenshot 2024-01-02 at 15 36 04

so it would appear that if you override (for example) padding-left of a widget that inherits from a widget that has set padding, all of the individual padding values get reset (presumably because of the specificity of DEFAULT_CSS?).

So, initially at least, this issue asks: is this a reasonable expectation and as such is a change needed here, or is this intended behaviour?

@davep davep added question Further information is requested Task labels Jan 2, 2024
@rodrigogiraoserrao
Copy link
Contributor

For what is worth, my expectation matches yours.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested Task
Projects
None yet
Development

No branches or pull requests

2 participants