Remove flex: 1 0 100% from rows
#31439
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
viicslen
approved these changes
Aug 5, 2020
MartijnCuppens
approved these changes
Aug 6, 2020
XhmikosR
added a commit
that referenced
this pull request
Aug 6, 2020
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
XhmikosR
added a commit
that referenced
this pull request
Aug 6, 2020
XhmikosR
changed the title
flex: 1 0 100% from rows
dsynr
added a commit
to dsynr/bootstrap
that referenced
this pull request
Aug 21, 2020
* Remove backdrop-filter from toasts * BrowserStack: test on Edge 15 * Backport twbs#31135 * Move color utility callouts to start of page Hierarchically/structurally, in the position they are currently at, the two callouts seem like they "belong" just to the "background color" section. Moving them to the start makes it clearer that those two callouts relate to everything in the page (both "Color" and "Background color" classes. * Change heading level otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading * Backport twbs#30326 Prevent overflowing static backdrop modal animation TODO: backport the test too * Backport twbs#30326 (Unit test) * Update Babel config (twbs#31011) * remove plugin-proposal-object-rest-spread * add bugfixes * `exclude: ['transform-typeof-symbol']` did nothing with our config * Update devDependencies and gems * Update dependencies, gems and regenerate package-lock.json (twbs#31261) * @rollup/plugin-node-resolve 8.1.0 * popper.js 1.16.1 * qunit 2.10.1 * rollup 2.21.0 * Docs: forms accessibility cleanup (backport from v5) (twbs#31234) * Expand advice for anchor-based controls * Expand accessibility note in input group * Correct statement about validation, fix server example * Tweak label > accessible name Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Mark Otto <markd.otto@gmail.com> * Turn off scroll anchoring for accordions (twbs#31347) New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see twbs#31341 This rule suppresses this new behavior and reverts back to the old way. See https://drafts.csswg.org/css-scroll-anchoring/ * Update to Ruby 2.7/Bundler 2.x. (twbs#31296) * Clear timeout before showing the toast (twbs#31155) * clear timeout before showing the toast * Add unit test * Remove the check for timeout * Check for clearTimeout to have been called Co-authored-by: XhmikosR <xhmikosr@gmail.com> # Conflicts: # js/tests/unit/toast.spec.js * Add unit test for toast to check clearTimeout to have been called (twbs#31298) * docs(skippy): prevent skip links from overlapping header * Backport twbs#31344 Add toasts to the components requiring JavaScript * Update devDependencies and gems * @babel/cli ^7.10.4 → ^7.11.0 * @babel/core ^7.10.4 → ^7.11.0 * @rollup/plugin-babel ^5.0.4 → ^5.1.0 * @rollup/plugin-commonjs ^13.0.0 → ^14.0.0 * @rollup/plugin-node-resolve ^8.1.0 → ^8.4.0 * autoprefixer ^9.8.4 → ^9.8.6 * eslint ^7.4.0 → ^7.6.0 * karma ^5.1.0 → ^5.1.1 * rollup ^2.21.0 → ^2.23.0 * Remove overflow: hidden from toasts (twbs#31381) (twbs#31407) Co-authored-by: Mark Otto <markd.otto@gmail.com> * Backport twbs#31339 (twbs#31414) * Backport twbs#31339 Add view on GitHub links for easier content editing from the docs * Prepare v4.5.1. (twbs#31408) * Remove flex: 1 0 100% from rows (twbs#31439) (twbs#31445) Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Mark Otto <markd.otto@gmail.com> * Restore make-container-max-widths mixin * Deprecate the `make-container-max-widths` mixin * Remove undefined `$ignore-warning` * Prepare v4.5.2. (twbs#31444) Co-authored-by: Mark Otto <markd.otto@gmail.com> Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: ysds <ysds.code@gmail.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk> Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com> Co-authored-by: Gaël Poupard <gael.poupard@orange.com> Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
olsza
pushed a commit
to olsza/bootstrap
that referenced
this pull request
Oct 3, 2020
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
daviseford
added a commit
to daviseford/aos-reminders
that referenced
this pull request
Nov 14, 2020
Fixes #988 Our concerns (noted in #965) are fixed. See: twbs/bootstrap#31439
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Looking some recent grid changes, I think the best option is to revert the latest tweaks and make some isolated improvements rather than the global row and container changes.
Here's a rundown of what got us to today:
min-width: 0to.colto prevent some broken columns in Prevent grid with default cols from breaking when large pre is present #30049, which closed Pre with horizontal scrollbar causes grid to stack #25410.min-width: 0on .col has too much side-effects #30979 to fix Default Col min-width: 0 affects responsive behavior #30852, which reverted the abovemin-widthchange..rowfrom shrinking in flex container #30940 to fix row width is not correct #30840, which addedflex: 1 0 100%to.rows so they didn't shrink if the parent was a flex container. This problem stemmed from v4.4.0 where navbar container was changed due to responsive containers. This caused Commit #30940 breaks layout/grid when there is more than one row #31432.We've already removed the
min-width: 0in v4.5.1, so that's covered. The last step is to undo theflex: 1 0 100%on.rows and get us back to our stable grid in v4. This is causing the problem reported in #31435. Unsettingflexfixes the issue, so that's why this PR removes the line entirely.The workaround for the
<pre>element in the columns is to addmin-width: 0to help flex layout shrink past the content's size. This is documented at https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size. There's also a demo of this in the CodePen below.#31438 restores the
make-container-max-widthsmixin, fixing our backward compatibility issue.Adding
.flex-fillto the.rowin our navbars fixes the issue with the row not taking up the full width of the parent container that hasdisplay: flex. This addresses #30840 properly. We could add custom styles to the navbar's rows, but that just sounds like it'd perpetuate the issue here.This demos hows all issues and changes at https://codepen.io/emdeoh/pen/LYNYmPR?editors=1100.
Fixes #31435, closes #31432.
My plan is to have us ship a v4.5.2 to fix the breaking change in #31438 and this PR to undo the grid changes and re-stabilize v4's grid system.