Additional containers

[willmcgugan]

We need a few additions / modifications to containers.py

• Center to horizontally align contents (width 100%, height auto)
• Middle to vertically align contents.
• Horizontal should have scrollbars disabled by default
• Vertical should have scrollbars disabled by default
• HorizontalScroll should have horizontal layout and scrollbars auto
• VerticalScroll should have vertical layout and scrollbars auto

[darrenburns]

There's some text about whether Horizontal and Vertical have scrollbars enabled or not in the "Layout" page of the guide. We'll need to make sure we update that page if we change the behaviour.

[rodrigogiraoserrao]

Trying to think as someone who just found Textual, a container called Vertical seems to be the simplest vertical container there is and it seems perfectly reasonable to expect that container to have scrollbars by default.
In fact, the name Vertical only implies a specific layout and it does not imply a change to the value of overflow, which is auto by default.

Why don't we let Horizontal and Vertical have their scrollbars by default, and add something like HorizontalNoScroll and VerticalNoScroll instead?

[willmcgugan]

The problem is that people liberally add these containers, but they generally only want a single container to scroll.

If they mess up the styling, and everyone will first attempt, it can be very confusing when you get a scrollbar you don't want. Because you don't know which container really is scrolling.

I think its easier to design a UI if you have to explicitly say which container(s) should scroll.

[rodrigogiraoserrao]

Then, should the default value of overflow be overflow: hidden hidden?

[rodrigogiraoserrao]

@willmcgugan what non-overflowing version are you going for?

1. don't overflow in either direction:
   • Horizontal and Vertical set overflow: hidden hidden.
2. don't overflow in the direction of the layout:
   • Horizontal sets overflow-x: hidden; and
   • Vertical sets overflow-y: hidden.

[rodrigogiraoserrao]

Also, do you literally mean for Center to align contents, or should it just align children?
(Ditto for Middle.)

[davep]

(not answering for Will, of course) I think it would only make sense for it to act on the immediate children What's being spoken about here is sort of a follow on from this FAQ.

[willmcgugan]

@willmcgugan what non-overflowing version are you going for?

1. don't overflow in either direction:

   • Horizontal and Vertical set overflow: hidden hidden.

This one.

Center should align children.

[rodrigogiraoserrao]

@willmcgugan I think it is more intuitive if the default styling of Center/Middle is to have their relevant dimension be 1fr instead of 100% to fill all the space available instead of being forcefully 100% of the container.

Let me know your decision and then I am ready to PR this.

[willmcgugan]

Leave the Center / Middle dimensions as blank, as it will compensate for margin.

[rodrigogiraoserrao]

After a quick chat, we agreed we'd set the relevant dimension to 1fr instead of 100% or leaving it unset.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.