Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !32278

Remove accordion jump

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge main-mc-sorry-eric into main Nov 29, 2020
  • Overview 0
  • Commits 3
  • Pipelines 0
  • Changes 2

Created by: MartijnCuppens

Inspired by Eric, I added a little accordion jump in #32013. Turns out @XhmikosR didn't like that, so he opened #32250 (closed).

Method is similar to the technique we use for the input/button groups. Because we now have an overlap, I needed a non-transparent color to prevent the colors from mixing.

I still notice a little jump in Chrome (rendering issue in Chrome, macOS?), but I'm afraid that's out of our jurisdiction (tried some hacks with will-change, but without result).

There's also still a little jump on the last item, but we also add an additional border. We could "fix" this by adjusting the bottom padding, but this could become problematic when the paddings are removed. Also, because in reality the accordion content won't always be exactly the same, chances are the total accordion height will vary when sections are collapsed.

Closes #32251 which closes #32250 (closed)

Preview: https://deploy-preview-32278--twbs-bootstrap.netlify.app/docs/5.0/components/accordion/#example

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: main-mc-sorry-eric