5.3.3 introduces breaking style bug in modal-header compared to 5.3.2 about bootstrap HOT 7 OPEN

This was introduced in #39373. /CC @mdo @julien-deramond

from bootstrap.

This broke for me in potentially a different way when I went from 5.3.2 to 5.3.3.

These are the pertinent variables as set by Bootstrap:

$modal-inner-padding:               $spacer !default;
$modal-header-padding-y:            $modal-inner-padding !default;
$modal-header-padding-x:            $modal-inner-padding !default;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default;

This is how I overwrote those variables when using 5.3.2:

$modal-inner-padding:               0;
$modal-header-padding:              $spacer;

I found I had to make the following update:

$modal-inner-padding:               0;
$modal-header-padding-y:            $spacer;
$modal-header-padding-x:            $spacer;

I don't understand CSS enough to know why, but if either of --bs-modal-header-padding-x or --bs-modal-header-padding-y are 0, then the following doesn't work:

margin: calc(-.5* var(--bs-modal-header-padding-y)) calc(-.5* var(--bs-modal-header-padding-x)) calc(-.5* var(--bs-modal-header-padding-y)) auto;

In my case both were 0, which should make the above effectively margin: 0 0 0 auto. Again, I don't understand why, but if I override the property to literally margin: 0 0 0 auto, it works.

You can see this in action by fiddling around in the inspector of https://getbootstrap.com/docs/5.3/components/modal/.

from bootstrap.

I was waiting for a reproducible example so far. I'll try to look into it as soon as possible manually based on #39798 (comment). FYI, as we tried to have a consistent approach with modals and offcanvases, it might be more than a revert. I'll keep you in touch (or @mdo if he manages to check this out before me).

from bootstrap.

Hello @bbottema. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

from bootstrap.

I currently use justify-content-between on modal-header as a workaround.

from bootstrap.

@mdo @julien-deramond if you guys don't have time, perhaps we could just revert the offending patch next week and release a new version.

from bootstrap.

I can confirm through the same means (fiddling around in the inspector of https://getbootstrap.com/docs/5.3/components/offcanvas/) that the offcanvas button position also fails if either of --bs-offcanvas-padding-x or --bs-offcanvas-padding-y are 0.

But please check for yourself!

from bootstrap.