'Unable to set dropdown boundary in Bootstrap 5

I had the following markup working in Bootstrap 4.

<div class="dropdown">
    <span type="button" class="dropdown" data-toggle="dropdown" data-boundary="viewport">
        <img src="~/images/menu.png" title="Menu" />
    </span>
    <div class="dropdown-menu dropdown-menu-right">
        <a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
    </div>
</div>

However, when I upgraded to Bootstrap 5, the dropdown no longer opens.

I figured out that I need to change the data-toggle attribute to use the data-bs-toggle attribute instead. Now the dropdown works.

However, the data-boundary="viewport" attribute no longer works. This attribute allows the dropdown to extend outside the container element. As it is now, the dropdown is cut off when its bounds fall outside of the container.

I tried using data-bs-boundary="viewport" and data-bs-boundary="body" as suggested in this question.

Does anyone know how to use this attribute in Bootstrap 5?

Update:

This is how Bootstrap is included in a new project created by Visual Studio.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - TempAspNet</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/TempAspNet.styles.css" asp-append-version="true" />
</head>
htmlcsstwitter-bootstrapbootstrap-5javaspringspring-jdbc


Solution 1:[1]

I see two possible solutions:

1. Change the Popper version via CDN

According to the most upvoted answer from this question, this happens because of the Popper version. Boostrap 4.6 uses Popper 1.16.1 (link) while Bootstrap 5 uses Popper 2.9.2 (link). Try changing the Popper version.

2. Take a look at the Popper docs

Try setting the area to something other than the body (link).

Let me know if this is helpful.

EDIT

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <!-- Popper version from Bootstrap 4.6 -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>

  </body>
</html>

Solution 2:[2]

Before accessing the model in JSP, declare the core JSTL taglib, and add JSTL jar files to the project. See:- Different ways to add JSTL

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<body>
    ${students}
    <!-- Other operations -->
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions