Modal header styling needs tidy up
See original GitHub issueThe modal header alignment is off in relation to the contents (via header .row
)
and it sports extra bottom padding (via header.merged
)
Issue Analytics
- State:
- Created a year ago
- Comments:7 (7 by maintainers)
Top Results From Across the Web
Considerations for Styling a Modal | CSS-Tricks
Typically, if you are on a long, scrolling page, while the modal is open you can still scroll the background, which in most...
Read more >Modal dialog with fixed header and footer and scrollable content
The modal dialog needs to have a fixed header (Area where the title "Edit board" "Board name" and "Board type" are located) and...
Read more >Modal - Bootstrap
Modals are built with HTML, CSS, and JavaScript. ... Included are the modal header, modal body (required for padding ), and modal footer...
Read more >Bootstrap Modal Dialog showing under Modal Background
The easiest solution is to move the modal dialog outside of any container and just declare it under the <body> element, or -...
Read more >A How-To Guide for Modal Boxes with Javascript, HTML, and ...
To style each of the elements in our simple modal's HTML, we need to create the associated CSS classes: .modal , .modal-content ,...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
If it’s ok. I think we can close this.
As the new modal designs get adopted for all modals - they won’t even use this shared header template.
The header for the new modals is built very differently (which has its own complexity in tailwind classes and using the same name like subtitle to render differently) but that’s an issue for another day.
The point is that both this modal header and the new one look good on main now and I think we can leave this as is.
Oh, thank you for the prompt @lb-. I now pulled the latest
main
and it paints a different picture:The title text is properly aligned. It must’ve been fixed by Thibaud’s epic PR. Should serve me well for not re-checking after that PR was merged.
.w-header.w-header--merged
has the.25rem
bottom padding. We could close this if that is insignificant.Thank you for taking the time, and sorry for the noise