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
  • Issues
  • #30322
Closed
Open
Issue created Mar 01, 2020 by Administrator@rootContributor

Click on Static Modal Backdrop Scaling up the Modal Content and Adding Scrollbar to Backdrop

Created by: Behseini

Using Bootstrap 4.4.1, I am facing an issue on clicking outside of static backdrop modal. As you can see in attached image when clicking outside of modal it is scaling up the size of Modal Content and eventually adding scrollbar to the backdrop. I have test this on Chrome and Firefox and same issue is happening. Can you please let me know how to stop this? Here is the image link Static

` <div class="container p-5">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data- 
    target="#staticBackdrop">
   Launch static backdrop modal
  </button>
  <!-- Modal -->
 <div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
 <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
 <div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Understood</button>
  </div>
  </div>
 </div>
   </div>
     </div>`
Assignee
Assign to
Time tracking