`width: 100%` mixed with `width: auto` amongst children has changed recently
Closed this issue · 2 comments
This has been mentioned and reported in a couple of places, and @willmcgugan is aware and considering the issue, but I thought it a good idea to have a central issue recorded for it (if only so there's somewhere to point anyone seeing the same problem with their apps at).
Given this code:
from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.widgets import Label
class Width100PCentApp(App[None]):
CSS = """
Vertical {
border: solid red;
width: auto;
Label {
border: solid green;
}
#first {
width: 100%;
}
#second {
width: auto;
}
}
"""
def compose(self) -> ComposeResult:
with Vertical():
yield Label("I want to be 100% of my parent", id="first")
yield Label("I want my parent to be wide enough to wrap me and no more", id="second")
if __name__ == "__main__":
Width100PCentApp().run()
until very recently this would result in the container being wide enough to contain the widest child, and the more-narrow child growing to fit the width of the container. Visually something like this:
As of (I think) 0.54, this has changed, and now the width: 100%
within a width: auto
container is causing the container to grow too wide:
This has been the cause of Textualize/trogon#77 and Textualize/frogmouth#98 as well as #4354. I've not checked yet but I strongly suspect this will also have broken ModalScreen
dialogs on a couple of my main applications too, if used with 0.54.
Looks like f094588 is the bad commit.
Don't forget to star the repository!
Follow @textualizeio for Textual updates.