-
Notifications
You must be signed in to change notification settings - Fork 4k
[fix] horizontal alignment of st.image in vertical containers #12495
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
[fix] horizontal alignment of st.image in vertical containers #12495
Conversation
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
✅ PR preview is ready!
|
| with st.container( | ||
| horizontal_alignment="center", key="container-horizontal-centered-elements" | ||
| ): | ||
| img: npt.NDArray[np.int_] = np.repeat(0, 10000).reshape(100, 100) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The type annotation npt.NDArray[np.int_] violates Python Guide typing requirements. Use typing_extensions for back-porting newer typing features and add from __future__ import annotations. Additionally, np.int_ is deprecated in newer numpy versions and should be replaced with specific integer types like np.int64.
Spotted by Diamond (based on custom rule: Python Guide)
Is this helpful? React 👍 or 👎 to let us know.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR fixes the horizontal alignment of st.image elements within vertical containers by adjusting how the image container width is handled in the frontend layout system.
- Removes
imgsfrom the width stretch override list and adds specific handling for image elements - Adds specific width handling for
arrowDataFrameelements withuseContentconfiguration - Adds E2E test coverage for centered elements in containers including images and dataframes
Reviewed Changes
Copilot reviewed 3 out of 6 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
frontend/lib/src/components/core/Block/StyledElementContainerLayoutWrapper.tsx |
Removes imgs and arrowDataFrame from width stretch override, adds specific width handling logic for both element types |
e2e_playwright/st_layouts_container_alignment_test.py |
Adds test case for container with horizontally centered elements |
e2e_playwright/st_layouts_container_alignment.py |
Adds test container with centered image, dataframe, and button elements |
lukasmasuch
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
Describe your changes
GitHub Issue Link (if applicable)
fixes #12435
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.