Bootstrap 4 modal with scrollspy feature for a seamless full-screen experience

I am trying to implement a full-screen modal using Bootstrap 4 that incorporates a scrollspy feature for scrolling the content within the modal body. I have successfully achieved the full-screen aspect, but I am facing issues with making the content scroll within the modal. How can I solve this problem?

Update: Additionally, the scrollspy functionality seems to be not working. Any suggestions on how to fix this?

<head>
  <!-- Include Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Include Bootstrap JS and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
  <!-- Button to open the modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open Modal
  </button>

  <div class="modal" id="myModal">
    <div class="modal-dialog modal-xl" style="max-width: 100%; margin: 5px;">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">Modal with Scrollspy</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body d-flex">
          <div data-spy="scroll" data-target="#scrollspy" data-offset="0">
            <div id="section1">
              <h3>Section 1</h3>
              <p>Content for Section 1 goes here.</p>
            </div>
            <div id="section2">
              <h3>Section 2</h3>
              <p>Content for Section 2 goes here.</p>
            </div>
            <div id="section3">
              <h3>Section 3</h3>
              <p>Content for Section 3 goes here.</p>
            </div>
          </div>

          <div id="scrollspy" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
          </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</body>

htmlcssbootstrap-4bootstrap-modal

Answer №1

Here is a code snippet that can be added to your project:

.modal-body {
    height: calc(100vh - 150px);
}
<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Bootstrap JS and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4c405d4a6f1d0116011e">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
  <!-- Button to trigger the modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open Modal
  </button>

  <div class="modal" id="myModal">
    <div class="modal-dialog modal-xl" style="max-width: 100%; margin: 5px;">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">Modal with Scrollspy</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body d-flex overflow-auto">
          <div data-spy="scroll" data-target="#scrollspy" data-offset="0">
            <div id="section1">
              <h3>Section 1</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nunc sit amet semper semper eu non ipsum. Vestibulum viverra neque ac turpis pellentesque, a elementum risus ultrices. Vestibulum sodales tempor metus, at varius urna pulvinar vel.</p>
            </div>
            <div id="section2">
              <h3>Section 2</h3>
              <p>Nullam pellentesque eros at quam fermentum, nec consectetur lectus malesuada. Sed vel ex leo. Ut vitae ullamcorper leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet sit amet quam id mattis.</p>
            </div>
            <div id="section3">
              <h3>Section 3</h3>
              <p>Vestibulum sed arcu nec diam viverra luctus vel ac ex. Duis rhoncus neque et tempor malesuada. Nam odio turpis, tristique nec egestas in, volutpat non turpis. Donec pellentesque diam vel lacinia ultricies.</p>
            </div>
          </div>

          <div id="scrollspy" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
          </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</body>

Answer №2

To implement a scrollable modal, I would suggest using the scrollable modal class and then nesting a scrolling element inside to prevent the entire modal body from scrolling.

<head>
  <!-- Load Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Include Bootstrap JS and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd8d4c9defb899582958a">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
  <!-- Button to trigger the modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open Modal
  </button>

  <div class="modal" id="myModal">
    <div class="modal-dialog modal-dialog-scrollable modal-xl" style="max-width: 100%; margin: 5px;">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">Modal with Scrollspy</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body d-flex">
          <div data-spy="scroll" data-target="#scrollspy" data-offset="0">
            <div id="section1">
              <h3>Section 1</h3>
              <p>Your custom content here.</p>
            </div>
            <div id="section2">
              <h3>Section 2</h3>
              <p>More unique content for Section 2.</p>
            </div>
            <div id="section3">
              <h3>Section 3</h3>
              <p>Additional content for Section 3.</p>
            </div>
          </div>

          <div id="scrollspy" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
          </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am having issues with the external CSS and JS files not functioning properly in my project

I'm currently working on a project that has the following file structure: https://i.sstatic.net/ixd9M.png However, I am facing issues with loading my CSS and JS files... <link rel="stylesheet" href="./css/main.css"> <sc ...

javascriptphpcssurlserver

EJS: Warning when the "<%= %>" tag is used multiple times within the code

I am currently working on incorporating EJS with Node.js and Express.js. I have defined an array variable called "kindOfDay" containing the names of days as strings, such as "Sun", "Mon"... Within the EJS views folder, there is a file named list.ejs. The i ...

htmlnode.jsexpressejs

use a jQuery function to submit a form

I have an HTML page with a form, and I want to display a specific div when the form is successfully submitted. The div code is as follows: <div class="response" style="display: none;"> <p>You can download it <a href="{{ link }}">here&l ...

javascriptjqueryhtmlajaxdjango

Maximizing cell background color in HTML table with limited width fails to function properly

Having difficulty turning the header cells (th) with background-color applied? It seems like the color bar may be too small, the cell width too large, or the background isn't being affected properly. Is there a way to create a narrow cell with long t ...

csshtml-tablerotationbackground-color

Effortlessly Transition to Full Screen with Div Expansion on Click

I'm currently working on creating a smooth transition for a div to expand fullscreen when clicked. My goal is to achieve a similar effect as the case studies on this website: Although my code can make the div go fullscreen, there's an issue with ...

javascriptjquerycsscss-animations

The Three JS on the website is error-free, yet it fails to function properly

I've been attempting to replicate the example three.js page on my own website, complete with a canvas for the 3D animation. However, I'm encountering an issue where nothing is displayed, despite no errors appearing. I've tried troubleshootin ...

javascripthtmlthree.jshtml5-canvasrendering

Display text below image in a reduced size for "mobile" screen

I am encountering an issue with my website where the font overlaps the image when viewed on a smaller device. How can I adjust the HTML or CSS to ensure that the text appears below the image on mobile devices? Below is the snippet of my HTML and CSS code: ...

pythonhtmlcssdjango

The Angular8 form encounters an error when trying to access the 'valid' property of an undefined value

I am implementing a register form to add an employee and including validation for accuracy. However, I encountered an error message that reads "cannot read property of 'valid' of undefined." Here is the code snippet: HTML <div class="conta ...

htmlangularvalidationtypeerror

Creating a div that is subtly askew

When it comes to positioning a div 15 pixels off-center horizontally from the page, traditional methods like setting margins to auto or using position:absolute may not work in this situation. The challenge lies in ensuring that the div scales correctly a ...

csshtml

Set the value of a PHP variable with jQuery

i am currently developing a website that includes buttons, each of which triggers a Bootstrap modal containing data from a MySQL database. I am passing a variable from jQuery to execute a MySQL query inside the modal. However, the PHP variable is having tr ...

phpjquerybootstrap-4bootstrap-modal

Base64 image failing to display in Internet Explorer

Is there a way to efficiently handle the base 64 form of an image in different browsers? The code I have achieves this as shown below: import base64 import requests img=requests.get('https://example.com/hello.jpg') base=base64.b64encode(img.cont ...

pythonhtmlimageinternet-explorerbase64

Tips for duplicating specific div elements

Is there a way to create copies of selected divs within the same panel using a Javascript report designer? I attempted to achieve this by using the following code snippet: function DesignerClone() { $(".ui-selected").each(function () { va ...

javascriptjqueryhtmljquery-uiclone

How can I use jQuery to slide up and slide down divs that share the same class?

Currently, I am working on creating a single-page checkout form. The challenge I am facing involves sliding up and down various divs with the same class name but different contents. To demonstrate this issue, I have prepared a sample in JSFiddle: http:// ...

jquerycss

I have implemented an email validation form in Angular, however, if the validation is not properly handled, the data will still be stored. How

When I enter an email address, for example: if I enter "abc" it shows an alert saying "please enter a valid email". If I leave it blank and try to submit, it shows an alert saying "email required". But when I click register, the data is saved regardless of ...

htmlangular

The required keys [:id] are not included in the route matches

As a beginner in Rails, I've encountered similar issues that I can't seem to resolve. Here are my routes: resources :users do resources :items end My model setup is as follows: class Item < ActiveRecord::Base belongs_to :user end cl ...

htmlruby-on-railsrubypathroutes

The Image Slider functions smoothly in Chrome, but encounters issues in IE11

Here is a link to the code I've been working on: http://jsfiddle.net/wf32jbhx/ I attempted to host images on my SharePoint site, but they ended up stacking on top of each other instead of formatting properly. Oddly enough, everything appears fine in ...

htmlcssgoogle-chromesharepointinternet-explorer-11

The issue of Bootstrap modals failing to show content when a button is clicked within the Django Framework

My Bootstrap modals in the HTML code are causing issues as they do not display any content when the triggering buttons are clicked. Despite having correct IDs and attributes, the modals remain empty when the buttons are clicked. Below is the relevant part ...

htmldjangodjango-modelsbootstrap-modalbootstrap-5

What could be causing media queries to not update values even after being changed through JavaScript?

I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS ...

javascripthtmlcssmedia-queries

Removing a modal div element in React after navigating

import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import Cookies from "js-cookie"; const LoginPage = () => { const [email, setEmail] = useState( ...

javascripthtmlreactjsbootstrap-5

The position of a jQuery element gets reset when both the show and stop animations are used

When I use jQuery's .position() to place an element, everything works fine. But as soon as I display an animation and then cancel it with an ajax call, the position of the element resets. function displayMessage(msg) { var $messageEl = $('#u ...

javascriptcssjquery-uijquery