Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using collapse on display:flex elements ie: row #22600

Closed
iatek opened this issue May 11, 2017 · 6 comments
Closed

Using collapse on display:flex elements ie: row #22600

iatek opened this issue May 11, 2017 · 6 comments

Comments

@iatek
Copy link
Contributor

iatek commented May 11, 2017

I found this same problem in closed #20442, and I was wondering if it will be revisited for beta. Since row is display:flex, and collapse.show sets display:block, the displayed row is off.

<div class="container">
    <div class="row">
        <h4 class="col">
        <a href="#details" data-toggle="collapse">
            <span>Expand</span>
        </a>
      </h4>
    </div>
    <div id="details" class="row collapse" aria-expanded="false">
        <div class="col-6">
            <h3>Text</h3>
        </div>
        <div class="col-6">
            <h3>Text</h3>
        </div>
    </div>
    <div class="row" aria-expanded="true">
        <div class="col-6">
            <h3>Text</h3>
        </div>
        <div class="col-6">
            <h3>Text</h3>
        </div>
    </div>
</div>

http://codeply.com/go/UuAQvoRMiC

@emma-burrows
Copy link

In case I'm not the only one who can't access that codeply snippet, I also included one in the question that probably prompted this issue: http://stackoverflow.com/questions/43909742/bootstrap-4-alpha-6-collapsed-two-divs-side-by-side-are-stacked-when-expanded

@mdo
Copy link
Member

mdo commented May 26, 2017

The solution here isn't to swap the display value on .collapse classes. @Johann-S, I'm curious if the collapse plugin could read the initial display somehow? Otherwise there's no way around collapse being somewhat limited.

@Johann-S
Copy link
Member

Johann-S commented May 26, 2017

I don't see any reliable method to check that, but we can check if the element to collapse have .row class and apply a different class with display: flex;.
Does it sounds a good solution for you @mdo ?

Edit :
It can be done easely with :

.collapse {
  display: none;
  &.show {
    display: block;
  }
  &.row.show {
    display: flex;
  }
}

@mdo
Copy link
Member

mdo commented May 27, 2017

That fixes it for row, but what if someone has overridden a one-off row to say inline-flex that also collapses? This fixes one edge case, but doesn't provide much help otherwise.

@Johann-S
Copy link
Member

Johann-S commented Jun 6, 2017

I added a way to detect the use of flexbox in our Collapse plugins 🎆

@mdo mdo added the has-pr label Jun 18, 2017
@DDDgfx
Copy link

DDDgfx commented Feb 7, 2018

I think I am having this problem. I add the collapse class to a .row, and the result is child columns stack as if block elements. Is there a fix?

@Johann-S Johann-S removed the has-pr label Feb 15, 2018
MartijnCuppens added a commit to MartijnCuppens/bootstrap that referenced this issue Mar 7, 2018
XhmikosR pushed a commit to m5o/bootstrap that referenced this issue Mar 12, 2018
* twbs#22600: prevent display:block for visible content

* allow transition for elements with show class
eazyrepo added a commit to eazyrepo/bootstrap that referenced this issue Jun 27, 2018
* Use Jekyll's markdownify filter instead of a custom plugin (twbs#25319)

* Allow to change `.table-striped` `odd` or `even` (twbs#25333)

* Remove -Pre from Nuget install

* dist

* rearrange and override extra borders

* tweak html

* Update dropdown.js to allow referenceElement (twbs#25219)

* ignore case (twbs#25373)

Less on 2 symbols

* Remove escaping selector and add a warning to inform folks to escape their selectors (twbs#25390)

* Use variables for theme-color-level function

Closes twbs#25313

* Add missing flex-fill utility

* Document .flex-fill class in flex utils

* Add CSS Utility for `auto` width and height Properties (twbs#24249)

Currently bootstrap only provides 4 variations of `width` and `height` css utilities, which are:

1. 25%
2. 50%
3. 75%
4. 100%.

Here, I'm adding `auto` to the list. This is useful when we need to reset the width/height value
back to the browser default value at some point.

* Allow to customize vertical margin of `nav-divider` mixin

* v4.1: Add .dropdown-item-text (twbs#22965)

* Add .dropdown-item-text class

* Add example of plain text within a .dropdown-menu, too

* reorganize, simple/clearer headings

* Feature: Add carousel fade option (twbs#22958)

* Move helpful code comments

* Add .carousel-fade option to Sass

* Document example of the fade carousel

* more logical warning of the .active class on carousel items

* Update devDependencies. (twbs#25371)

* Fix typo in navs.md (twbs#25404)

* Update jQuery to v3.3.1. (twbs#25398)

* Fix typo in approach.md (twbs#25492)

* Update devDependencies and gems. (twbs#25502)

* Fix example Blog post card text overflowing for medium screen size. (twbs#25416)

* Replace unicode character in _hover.scss (twbs#25503)

* Fix "CVV" label pointing to wrong field (twbs#25518)

* Clarify stacked-to-horizontal in layout/grid.md (twbs#25520)

- Fixes typo with "with at" in "horizontal with at the small breakpoint"

* Add FontAwesome to icon list. (twbs#25451)

* Examples: Prevent focus into closed offcanvas (twbs#25524)

* Prevent focus into closed offcanvas

* Override .custom-select width in .form-inline (twbs#25414)

Fixes twbs#25413

* close twbs#25534

* Fix pagination buttons hover z-index (twbs#25532)

* Clarify migration docs to remove mention of .table-responsive being for the parent element vs the table element itself (twbs#25539)

* Update devDependencies and gems. (twbs#25551)

* Enable `scss/dollar-variable-default` rule (twbs#25542)

This checks if all variables are `!default`.

* Fix the incorrect id in center modal example

* Remove `show` class from example code (twbs#25570)

* Create a variable for label margin bottom (twbs#25561)

* use $input-bg for $custom-select-bg (twbs#25564)

* use $input-bg for $custom-select-bg

* Update themeing docs for more clearly how to remove from map (twbs#25589)

* Add note about insert position of "map-remove"

* Use optional keys instead of required keys

* set color to form-control-plaintext (twbs#25565)

* set color to `.form-control-plaintext`
* fixes readability on dark themes like ‘darkly’
  * https://bootswatch.com/darkly/index.html#forms
  * https://bootswatch.com/slate/index.html#forms
  * https://bootswatch.com/superhero/index.html#superhero
  * https://bootswatch.com/solar/index.html#forms

/cc @thomaspark

* dist

* Update `.sr-only` mixin and utility (twbs#25197)

* Remove clip-path from .sr-only utility as it causes perf regressions in Chrome

* change snippet to example

* Fix border-radius on Browse button for custom file input inside input groups (twbs#25356)

* Update stylelint config to add missing properties (twbs#25572)

* add missing properties

list of new properties:
align-content
animation-fill-mode
appearance
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
direction
fill
flex-shrink
orphans
page-break-after
page-break-before
page-break-inside
perspective
src
stroke
unicode-bidi
widows

* fix invalid JSON config

add curly brackets

* Update .stylelintrc

* Dropdown - Allow to disable Popper.js style (twbs#24092)

* Dropdown - Allow to disable Popper.js style

* Update dropdown.js

* Update dropdown.html

* copy changes

* Prevent word-wrap (twbs#25248)

Fixes twbs#25235

* Update position.md (twbs#25607)

2 small typos

* Reword alert and list group text to avoid "a/an" problems

Closes twbs#25611

* [Docs] Clarify suggested use of custom validation styles, add note about resetting form appearance after validation (twbs#25628)

* Expand/clarify recommendation for using custom validation styles

Seems support for correctly announcing browser default navigation bubbles/notifications has improved recently. Now it seems only Chrome (at least on Win and Android, not tested on macOS) is the odd one out.

However, we should really make sure the custom validation messages are also tied correctly to their relevant form controls - need to dig out the PR that will ensure that.

* Add note about resetting form appearance after submission

xref twbs#25626

* Add `type="button"` to `<button>`s in accordion example (twbs#25643)

For consistency. Closes twbs#25642

* Fix carousel transition duration (twbs#25218)

* Custom range input (twbs#25600)

* added the styling

* added the documentation

* update for one rule per line

* fix hound error: trailing whitespace

* trimmed off vendor prefixes

* Add note about track and thumb

* Psuedo-elements must be split across multiple rulesets to have an affect

* Fix firefox inner focus

* Seems that FF is the only one affected by this

* Add support for gradients

* Add labels, clarify min/max changes

* add step example

* add custom range vars

* Be more explicit where to find variables  (twbs#25624)

* Tell where to find the variables to override

* Be consistent with path to _variables.scss

* Get rid of some 'our' in the doc

Replaced by 'Boostrap's' when relevant

* Add color variable for caption (twbs#25657)

* dist

* make it a var

* Consistent usage of $(document.body) instead of $('body') (twbs#25671)

* Brush up vertical rhythm of form-check in docs. Closes twbs#25546

This adds `form-group` to add the same vertical space to the `form-check` as in other grouped controls
used in form sample markup.

Thanks!

* Remove disabling of stylelint rule

This file no longer has intentional indentation errors

* Add focus states to custom docs buttons

* Fix typo of example in hiding doc

* dist

* Fixes twbs#25703

* Add tabindex attribute to disabled buttons sample. Closes twbs#23361 (twbs#25680)

As discussed in issue's comment:
https://git.io/vAuPW

Thanks!

* Remove unused variable (twbs#25670)

This variable is not used anywhere.

Leftover from twbs#18373.

* docs skippy partial (twbs#25750)

* load skippy markup from includes

* display on xl viewport

See issue twbs#25711

* Fix leftover reference to v4.0.0-alpha.6

Running `./build/change-version.js v4.0.0-alpha.6 v4.0.0` fixed this,
so the version change script works fine. I'm presuming instead this
change was just omitted from 35f80bb, and then wouldn't have
been caught by subsequent runs of `change-version`, since it only
ever replaces the exact old version string specified.

* Replace img-fluid by w-100 to conform with HTML

* Adding a variable to handle the change of a modals border-radius. (twbs#25691)

* dist

* Fix twbs#25746

* Update blockquote migration docs to reflect twbs#22949

Fixes twbs#25669, closes twbs#25779.

* Update devDependencies and gems. (twbs#25708)

* add code coverage

* Add a bit of documentation on how to run the code coverage (twbs#25783)

* Update webpack.md

Minor edits for style and consistency

* style: align some vars (twbs#25785)

* add Icons8 to icon options (twbs#25763)

[Icons8](https://icons8.com/) is a great resource for icons.

They provide 15 different icon styles, exportable as fonts or svg

* Collapse with flex elements - simple approach (twbs#25806)

* twbs#22600: prevent display:block for visible content

* allow transition for elements with show class

* re-use gray for bd-example border / background (twbs#25751)

* Fix caret alignment (twbs#25719)

* Allow customization of breadcrumb border radius (twbs#25807)

* Clean shell scripts (twbs#25704)

* Replace "loose" HEX values with their respective variables (twbs#25672)

* Fix examples' issues twbs#25664 and twbs#25388 (twbs#25665)

* Prevent sign-in form from going outside viewport (twbs#25388)

* Workaround IE centering bug

* Disable link functionality on disabled `btn-link` (twbs#25645)

Future-proof disabling of clicks on disabled `btn-link`. Fixes twbs#25639
ensuring consistency between `btn-link` `<button>`s and `<a>`s when disabled.

* Add basic position to dropup/right/left and dropdown-menu-right (twbs#25400)

* Rename `.custom-file-control` to `.custom-file-label` (twbs#25736)

* Use callout without custom Jekyll plugin.

* callout.html: drop whitespace and better usage comment.

* Use bugify without custom Jekyll plugin (twbs#25334)

* Clarify the necessary `data-target`/`href` attribute for carousel controls (twbs#25690)

* Variable transition durations (twbs#25662)

* fix get the transition duration parent

* saucelabs-unit-test.js: tweak failed tests message (twbs#25836)

* approach.md: Fix empty link.

* approach.md: Use normal apostrophes.

They are converted when building.

* Add Sinon to do better unit test

* Document `.form-control-range`. (twbs#25839)

* Remove custom example plugin. (twbs#25784)

* Enable docsearch in development env.

Previously a search redirected to `https://getbootstrap.com/...`

* Alternative solution.

Rely on `site.url` which is different for production. In that case do nothing with the search result, otherwise when in development remove our url from it.

* Fix order of Save/Close buttons in modal code example (twbs#25855)

* Update vertical pills example (twbs#25852)

Add the column/grid to the example code (which is what makes it vertical in the first place)

* theming.md Typo Fix (twbs#25875)

it's ≠ its

* Separate issue templates, add support doc (twbs#25705)

* Update issue template to break down by bug and template, add support doc to close twbs#23133

* add links from readme for bug and feature templates

* Making use of `prefers-reduced-motion` media query (twbs#25641)

* Making use of `prefers-reduced-motion` media query

As discussed in twbs#25249 - if a user (Who is using Safari / iOS) requests
reduced motion in their system settings, we should avoid transitions.

* Ignoring prefers reduced motion for CSS Linting
* Updating copy clarifying the reduce motion functionality in accessibility.md

* Use transitionEnd in QUnit since we moved away from PhantomJS

* throw error when coverage is under our thresholds

* Update dependencies.

* tests: use QUnit from the jQuery CDN.

* Use sinon from cdnjs.

* Update to workbox 3.0 & fix breaking changes

* sw.js: fix TypeError with new workbox.

* Update workbox.js

* Update all devDependencies.

Kept back karma-qunit and qunitjs because tests fail.

* fix rollup config

* tests: load 3rd-party libs from the local node_modules folder.

This reduces duplication and the chances to forget to update something.

* Remove the local jquery-1.9.1.min.js.

* Fix skip element disabled via attribute when using keyboard navigation

* Fix duplicate `main` element.

* Fix spacing between Item and numbers

* fix bundle and run test against it

* Add .bg-transparent to docs

* docs: Switch to StackPath's URL.

While the old one will keep working, better switch to the new one.

* Revert "docs: Switch to StackPath's URL."

This reverts commit 7052085.

* Correct children selector

* fixes twbs#25918

* dist

* Add small not to float docs about mixing with flex items

Closes twbs#25829, closes twbs#25924

* fixes twbs#25343 by mentioning how collapse animates in docs

* Add .text-monospace util

* Remove navbar align

* Close twbs#25697

Removes the .justify-content-between from a navbar form example given it's the default style. Instead, mention how to adjust this and link to flex utils.

* add .text-body, fixes twbs#25412

* add 50% translucent black and white text

* document new text color utils

* Fix Chrome's rendering of .card-columns

Uses orphans/widows trick from @fran-worley at twbs#20925 (comment).

Fixes twbs#20925.

* Add new .flex-grow and .flex-shrink utils

* Mention browserslist config in our docs to close twbs#25429

* Add box-shadow utilities (twbs#25758)

* Deprecate .text-hide (twbs#26173)

* dist

* docs edit suggestion

* Tiny grammar and punctuation tweaks to a comment.

1. It's == "it is"

2. The subject of the sentence is "Only one" (not "these") so the verb must agree with it.

Feel free to do nothing with this change, use it, etc - I just saw this while reading through the code.

* Dashboard updates (twbs#26179)

* Update Dashboard example

- Replaces .sticky-top on .navbar with .fixed-top
- Adjusts padding on main content area and sidebar to account for fixed navbar
- Move to padding in sidebar instead of top: 48px; fixes Firefox rendering issue
- Adds new .shadow utility for a little extra cherry on top
- Moves sticky styles to separate feature query ruleset to avoid IE rendering issues

* Add .w-100 to chart to fix IE horizontal scroll from label that extended past viewport

* Update offcanvas example for IE support

- Replaces CSS variables with their appropriate hex values
- Fixes the broken navbar transition by moving from 2D translates to using position
- Fix broken IE navbar toggler placement with some utilities (not necessary anywhere else, but necessary given flexbox quirks)

* Allow non-string content as breadcrumb divider (twbs#25581)

* Allow url(), attr(), none,... as breadcrumb divider
* Update breadcrumb divider docs

* Pagination move `.page-link:focus` outline value to variable `$pagination-focus-outline` so we can unset it via Sass and don't have to re-implement browser defaults

* dist

* Use https when possible.

* Fix broken URI fragments and redirects.

* docs: Switch to StackPath's URL.

While the old one will keep working, better switch to the new one.

* Remove note about multiple inputs (twbs#26194)

* Remove note about multiple inputs

* patchs the PR and removes the word Also

* add examples to theming docs section on css vars in media queries, closes twbs#26205

* closes twbs#26213

* vnu.jar: Ignore all wrong language code warnings.

* Ship v4.1.0 (twbs#26218)

* update docs path from docs/4.0/ to docs/4.1/

* bump version to 4.1.0

* Update redirects to work for 4.1 docs move

* Update docs version switcher to include latest and link to 4.0 docs

* re-run dist

* Update package-lock.json

* Update docs-navbar.html

* Clean up globals.

Also, add a missing license header in build/workbox.js.

* v4 improve coverage (twbs#25945)

* Improve code coverage for our Button plugin

* improve coverage for our Alert plugin

* test tooltip update method

* test update and dispose for dropdown

* increase code coverage requirements

* Fix incorrect class name (twbs#26239)

Fixes twbs#26235

* Update dependencies and gems (twbs#26234)

* Fix incorrect value of Stylelint option (twbs#26192)

* update README.md - debug search option is now in application.js (twbs#26263)

* Dropdowns `display` default value (twbs#26272)

* modal use global scope for default

* Docs/examples: change links to Sass documentation and example.com to https

* fix issue related to Object.keys and Dropdown issue

* [trivial] Correct typos (twbs#26297)

* Remove `dialog` from the HTML5 shim style (twbs#26269)

`<dialog>`, in browsers that support it, has user agent styles of `dialog { display:block; ...} dialog:not([open]) { display:none; }`
by forcing it to `display:block` in the shim, the dialog is shown even when closed. There's no clean way to shim this for non-supporting browsers,
but arguably these browsers would have further problems with pure `<dialog>` usage anyway, and it's up to authors to then use different elements/shims.

* Resolve twbs#26262: Add deprecated warning (twbs#26292)

* Bump version to 4.1.0 for remaining files.

* breadcrumb.md: Remove trailing space.

* Suppress text-hide deprecation warning (twbs#26242)

* Update devDependencies. (twbs#26309)

* Update devDependencies. (twbs#26322)

* Be explicit in the docs for deprecating text-hide

* typo

* detect test exceeded maximum duration on Sauce Labs

* Update Jekyll to 3.8.0. (twbs#26352)

* Print color fix dark tables and dark theads (twbs#26193)

* workaround for IE that check indicator does not appear (twbs#25944)

* Replace reboot monospace hack with system font stack

* add validation styles for .form-control-file (twbs#26181)

* Remove unnecessary resetting of left round (twbs#26238)

* Closes twbs#26300: Add cursor pointer to carousel indicators

* Change accordion example id (twbs#26391)

for clarity/consistency with other similar examples

* Pass docs version to search form and switch to the new index.

Also, move the search code to a separate file.

* Add comment in docs JS files.

* Doc update - remove media-breakpoint-up(xs) (twbs#26316)

* Doc update - remove media-breakpoint-up(xs)

If media-breakpoint-down(xl) is not listed, then media-breakpoint-up(xs) does not need to be listed either.
The above 4 media queries are now aligned with the 4 media-breakpoint-up mixins (just like their media-breakpoint-down counterparts).

* Improve media-breakpoint-up/down docs

* Update README.md

* Simplify custom file inner height for generated browse button

* dist

* Bump version to v4.1.1

* Fix heading levels (twbs#26433)

H3 was used without preceding H2, breaking document flow.

* Fix z-index target (twbs#26361)

* fix(doc): typo in dropdowns.md

* [trivial] Rewording in tooltips. Closes twbs#26467 (twbs#26521)

* Fix double-transition bug (twbs#26452)

By applying the transition: CSS property only to classes that are
active during sliding, we avoid an unnecessary, non-zero-time
animation that although mostly invisible, does interfere with e.g.
z-index based parallax

* closes twbs#26543, fixes twbs#26542

* Fix/add more correct labels/descriptions for input group examples (twbs#26551)

Among other things, closes twbs#26548

* Update devDependencies and gems.

Downgrade bundlesize until they make brotli optional since it doesn't work with node.js 10.x yet.

So, babel, qunit/karma-qunit and bundle-size aren't the latest versions.

* chore(deps): update qunit and karma-qunit

* fix(tooltip): remove useless unit test

* Update again.

* Custom forms transition

* Add disabled bg color to disabled custom file

* Add coverall to follow our coverage

* fix branch for coveralls badge

* Run coveralls only on Travis and only once.

* Update package-lock.json.

* Remove the unused docs upload preview stuff. (twbs#26599)

* https link to editorconfig.org

* Fix inline labels with a custom select (twbs#26615)

Add an sr-only class to the label on inline labels with a custom select

* Changed Node.js download page (twbs#26638)

Link to the more user-friendly Node download page (rather than just the raw directory view)

* fix(tooltip): xss in container option

* fix(collapse): xss in parent option

* fix(scrollspy): xss in target option

* Generate safari-pinned-tab.svg again.

* refactor(plugins): improve how we query elements

* chore(bundlesize): increase bootstrap.js max size

* sw.js: change to a relative link for the workbox files.

This was broken after the docs refactoring.

* Stricter stylelint rules

* refactor(plugins): query elements without jquery

* Limit .close hover/focus to non-disabled controls (twbs#26654)

* Fix markdown code inside HTML code. (twbs#26662)

* HTTPS link (twbs#26663)

saves a redirect

* Add additional wording to the Introduction section of Bootstrap docs about the bootstrap bundle js (twbs#26688)

* Fix node_modules path (twbs#26653)

* Remove inkscape data from brand svgs (twbs#26708)

* Update package-lock.json with npm 6.3.1.

* Update gems.

* Update all devDependencies apart from bundlesize and babel.

Newer bundlesize versions still don't work with node.js 10.x.

babel has some bugs that we need to be fixed.

* Change karma tests to run sequential.

I was getting port in use errors.

* Update folder structure (twbs#26729)

* Remove disabled class from wrapper

`disabled` class is not needed for wrapper.

* dist

* Move `eslint-plugin-compat` to the extends array.

* Render inline svg like img (twbs#25874)

* Update box-shadows on .custom-select (twbs#26754)

- Fixes twbs#25656 where custom selects had the wrong focus shadow
- Fixes twbs#26668 where custom selects had no inset shadow (also closes twbs#26572 which had the wrong form classes on the first example anyway)

* Fixes Edge and IE label overlapping issue (twbs#25919)

The 'Floating labels' example is only supported on Chrome, Safari and Firefox. On Edge and IE the label is displayed always and any text input overlaps the label which makes it unreadable.

The fix here targets Edge and IE and makes the form behave normally, the labels are hidden and the placeholder color is standard.

* dist

* feat(dropdown): add original click event

* Add broken-link-checker.

* fix(tooltip): get tip on placement change
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants