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

Add vertical alignment parameter to st.columns #8568

Open
wants to merge 31 commits into
base: develop
Choose a base branch
from

Conversation

LukasMasuch
Copy link
Collaborator

@LukasMasuch LukasMasuch commented Apr 26, 2024

Describe your changes

Adds a vertical_alignment parameter to st.columns that allows to bottom, top, or center align the items vertically.

GitHub Issue Link (if applicable)

Testing Plan

  • Added unit & e2e tests.

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

@LukasMasuch LukasMasuch changed the title Add vertical alignment option to st.columns [Prototype] Add vertical alignment option to st.columns Apr 26, 2024
Copy link

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@LukasMasuch LukasMasuch changed the title [Prototype] Add vertical alignment option to st.columns [WIP] Add vertical alignment option to st.columns May 28, 2024
@LukasMasuch LukasMasuch changed the title [WIP] Add vertical alignment option to st.columns Add vertical alignment option to st.columns May 29, 2024
@LukasMasuch LukasMasuch changed the title Add vertical alignment option to st.columns Add vertical alignment parameter to st.columns May 29, 2024
@LukasMasuch LukasMasuch marked this pull request as ready for review May 29, 2024 11:27
@LukasMasuch LukasMasuch requested a review from a team as a code owner May 29, 2024 11:27
Copy link
Collaborator

@kmcgrady kmcgrady left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer to not impact the CSS of the checkbox example. I think it's worth talking more about how checkboxes are supposed to take up space. Can we not reflect the height of the checkbox to be equivalent to the height of a text input/button and center the text within it? I imagine that might add a tiny bit more space in markdown, but I think it will be much easier to reason about the height of elements if it's consistent?

frontend/lib/src/components/core/Block/Block.tsx Outdated Show resolved Hide resolved
// better with other input widgets. This is a temporary (ugly) fix
// until we have a better solution for this.
"& .element-container:last-of-type > .stCheckbox": {
marginBottom: 9,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be "9px" right?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep. But we can actually use 0.5rem here which is the exact value we need to correctly align this with 2.5rem.

@LukasMasuch
Copy link
Collaborator Author

LukasMasuch commented Jun 3, 2024

Can we not reflect the height of the checkbox to be equivalent to the height of a text input/button and center the text within it? I imagine that might add a tiny bit more space in markdown, but I think it will be much easier to reason about the height of elements if it's consistent?

I would love to have a more generic solution for this as well. We were able to do that with all of the other relevant elements in #8797. But the checkbox is a bit of an outlier :( It does not have a top label, and it is often used in combination with other checkboxes as a checkbox group. Setting it to 2.5rem min height would have a more significant visual impact:

Current version:

Screenshot 2024-06-03 at 13 15 38

With a height of 2.5rem:

Screenshot 2024-06-03 at 13 14 55

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Coming soon] Vertical alignment for columns
2 participants