question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal header styling needs tidy up

See original GitHub issue

The modal header alignment is off in relation to the contents (via header .row) Screenshot 2022-07-31 at 17 19 35

and it sports extra bottom padding (via header.merged Screenshot 2022-07-31 at 17 18 03 )

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
lb-commented, Aug 9, 2022

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.

0reactions
zerolabcommented, Aug 7, 2022

Oh, thank you for the prompt @lb-. I now pulled the latest main and it paints a different picture:

Screenshot 2022-08-07 at 13 30 17

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found