Comments (7)
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.
Related Issues (20)
- Adding new SCSS variables for `letter-spacing` HOT 1
- Floating Labels for File Input
- Suggest a new feature
- input add min-inline-size:0;
- Modal of Bootstrap v5.3 did not work! HOT 1
- How RTL support works with Sass in Bootstrap.
- The dropdown is not working after updating navbar content using HTMX
- Define `$component-active-color` with `color-contrast()` HOT 1
- Active nav links with default style look inactive HOT 2
- Request for recovery of One Time Key
- docs: Improve install guide for modern use like in scss.
- Reduce CSS variable overrides for colors HOT 1
- Add a glass effect to dropdowns HOT 3
- Floating labels incorrectly positioned for inputs with autofill, but no value HOT 2
- Upon initial launch of the Bootstrap modal NVDA reads all the content of the modal
- System UI font not used on WebKit
- bootstrap
- Carousel More Gallery HOT 1
- Offcanvas - dispose() not reseting scrollbars
- overflow-x-scroll has an !important applied negating respinsive directives HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap.