[Dialog] - Long title makes dialog content to overflow in small screens #6969
Labels
Comments
|
FE-6816 |
Merged
14 tasks
Parsium
added a commit
that referenced
this issue
Oct 23, 2024
…modal components Fixes a layout issue, where content inside of a sticky footer `Form` would overflow outside of a parent Carbon modal, such as `Dialog`, `DialogFullscreen` and `Sidebar`, at small screen sizes. closes #6969
Parsium
added a commit
that referenced
this issue
Oct 23, 2024
…dal components Fixes a layout issue, where content inside of a sticky footer `Form` would overflow outside of a parent Carbon modal component, such as `Dialog`, `DialogFullscreen` and `Sidebar`, at smaller screen sizes. closes #6969
Parsium
added a commit
that referenced
this issue
Oct 23, 2024
…dal components Fixes a layout issue, where content inside of a sticky footer `Form` would overflow outside of a parent Carbon modal component, such as `Dialog`, `DialogFullscreen` and `Sidebar`, at smaller screen sizes. Utilises CSS Flexbox more internally, to improve how each component adapts to changes in screen size. closes #6969
carbonci
pushed a commit
that referenced
this issue
Oct 23, 2024
### [144.0.1](v144.0.0...v144.0.1) (2024-10-23) ### Bug Fixes * **dialog:** ensure height never exceeds 90% of the viewport height ([619a651](619a651)) * prevent sticky footer form content from overflowing in Carbon modal components ([cb77fb7](cb77fb7)), closes [#6969](#6969) * resolve layout issues with sticky footer forms inside Carbon modal components ([0fe249d](0fe249d))
|
🎉 This issue has been resolved in version 144.0.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
and others
Description
Given a Dialog component that has a Form as a children with the stickyFooter prop
When rendered in a mobile screen width
Then the dialog content is push down and overflows the dialog boundaries.
Reproduction
https://stackblitz.com/edit/parsium-carbon-starter-h5jjs3?file=src%2FApp.tsx
Steps to reproduce
JIRA ticket numbers (Sage only)
No response
Suggested solution
Given a Dialog component that has a Form as a children with the stickyFooter prop
When rendered in a mobile screen width
Then the dialog content is stays inside the dialog
Carbon version
142.9.1
Design tokens version
4.29.0
Relevant browsers
Chrome
Relevant OSs
MacOS
Additional context
No response
Confidentiality
The text was updated successfully, but these errors were encountered: