The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally.

Here is the code snippet:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <div style="margin-bottom: 0px;" class="navbar-header justify-content-start">
        <a class="navbar-brand" href="#">
          <img width="100" src="assets/Acc_logo.png" alt="logo">
        </a>
      </div>

    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" 
         aria-haspopup="true" id="dropdownMenuButton" aria-expanded="false">
          <div class="divIcom"></div>
          <div class="divIcom"></div>
          <div class="divIcom"></div>
        </button>
        <ul class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </ul>
    </div> 
  </div> 
</nav>

Additionally, some CSS has been added:

li {
    list-style-type: none;
  }

.divIcom {
    width: 30px;
    height: 3px;
    background-color: gray;
    margin: 6px 0;
  }
  .dropdown-toggle::after {
    display:none;
}

Styles used in angular.json:

    "styles": [
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      "./node_modules/bootstrap-icons/font/bootstrap-icons.css",
      "src/styles.css"
    ],
    "scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/popper.js/dist/umd/popper.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
      "./node_modules/chart.js/dist/Chart.min.js"
      ]
  },

https://i.stack.imgur.com/quoud.png

Edit 1 -

zone.js:1711 Uncaught TypeError: i.createPopper is not a function
    at Mt._createPopper (node_modules\bootstrap\dist\js\bootstrap.min.js:6:23961)
    at Mt.show (node_modules\bootstrap\dist\js\bootstrap.min.js:6:22277)
    at Mt.toggle (node_modules\bootstrap\dist\js\bootstrap.min.js:6:22073)
    at HTMLButtonElement.<anonymous> (node_modules\bootstrap\dist\js\bootstrap.min.js:6:26705)
    at HTMLDocument.s (node_modules\bootstrap\dist\js\bootstrap.min.js:6:4456)
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Zone.runTask (zone.js:178:47)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
    at invokeTask (zone.js:1661:18)
    at globalCallback (zone.js:1704:33)

Can someone help me fix this issue?

htmlcssangulartwitter-bootstrap

Answer №1

Implementing the dropdown-menu-sm-end feature is effective in version 5.2:

li {
        list-style-type: none;
    }
    
    .divIcom {
        width: 30px;
        height: 3px;
        background-color: gray;
        margin: 6px 0;
    }
    
    .dropdown-toggle::after {
        display: none;
    }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b2a9b5a9b5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <style>li {
        list-style-type: none;
    }
    
    .divIcom {
        width: 30px;
        height: 3px;
        background-color: gray;
        margin: 6px 0;
    }
    
    .dropdown-toggle::after {
        display: none;
    }</style>
<h1>Hello, world!</h1>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <div style="margin-bottom: 0px;" class="navbar-header justify-content-start">
                <a class="navbar-brand" href="#">
                    <img width="100" src="assets/Acc_logo.png" alt="logo">
                </a>
            </div>
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" id="dropdownMenuButton" aria-expanded="false">
                    <div class="divIcom"></div>
                    <div class="divIcom"></div>
                    <div class="divIcom"></div>
                </button>
                <ul class="dropdown-menu dropdown-menu-sm-end" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </ul>
            </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284a47475c5b5c5a4958681d061a061a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

edit

To resolve conflicts, consider removing excess code and retaining only essential bundles (perhaps excluding jquery if not utilized elsewhere). Test this configuration:

   "scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
      "./node_modules/chart.js/dist/Chart.min.js"
      ]

Answer №2

modify the dropdown-menu-sm-right

so it becomes 

dropdown-menu-right dropdown-menu-sm-left

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

What is the process for transferring a file's contents to my server?

I am currently working on allowing users to import an OPML file that I parse server-side in my Rails application. However, I am facing difficulties as it appears that my server is not receiving the information correctly (neither the success nor error funct ...

javascripthtmlruby-on-railsajaxjquery

Roll out a custom-built server for an Angular 7, MongoDB, Express, and Node application

I am seeking to host my Angular application with Node.js, MongoDB, and Express.js on a server of my own. My current deployment method involves: -> ng build --prod (generates output in the dist folder) -> ng serve from the dist directory To start the back ...

node.jsangularexpressdeployment

Embedding a video element results in an unexpected increase in height

When I insert an HTML5-Video element into a div, it results in the wrapper having a height larger than the video itself. The wrapper is 7px taller than the actual video source, without any min-height set. Check it out! (Scroll down to the Video) The vide ...

htmlcsshtml5-video

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dyn ...

jqueryhtmlcsstwitter-bootstrap

Tips for utilizing the @Input() property of a component to set the initial value of an input field

Is there a way to utilize the value of an @Input() property on Component B as the initial value for an input field in that component when it is contained within Component A? I attempted passing the value during form construction, but found that it only wo ...

angularangular-reactive-formsangular-components

What is the best way to center CSS slider switches without causing any damage to them?

Does anyone have ideas on how to align CSS Slider Switches? I tried using position: absolute; margin-left: 15em, but the sliders need to remain non-absolute for visual effects. A flex grid was considered, but I don't want the switches to wrap. Usin ...

htmlcss

Ways to eliminate excessive spacing between grid blocks

Hey, I'm having an issue with displaying ads in a thumbnail format; there seems to be too much space between them. Take a look: I've been utilizing Bootstrap thumbnails to showcase products. echo '<div class="col-sm-6 co ...

csstwitter-bootstrap-3

What is the best way to hide the select arrow in an input-group using Bootstrap 4?

Is there a way to get rid of the unsightly double arrow in the select element? I have tried various solutions I found online, but none seem to be effective. <div class="form-group"> <label for="date">Date</label> <d ...

htmlcsstwitter-bootstrapbootstrap-4html-select

What is the best way to include my preferred links for reading with PHP Universal FeedParser?

Recently, I've been experimenting with the PHP Universal FeedParser to retrieve and display RSS feeds on my website. However, as a newcomer to this technology, I have encountered some challenges. While the initial link provided in the sample works wit ...

phphtmlcssxmlrss

Obtain and utilize the background color to easily implement the same color in another window

For my Chrome Extension project, I am looking to retrieve the background color of the current page and then set the background color of a window to match. Can someone guide me on how to accomplish this using JavaScript (with or without jQuery), and if ne ...

javascriptcssgoogle-chrome-extensionwindowbackground-color

Adjusting the Underline Navigation Effect with jQuery

My current setup includes a basic navbar with an up arrow that slides underneath it when a navigation title is clicked. The arrow initially rests between two nav titles, and when one of them is clicked, some text also slides in. I am looking to implement ...

jqueryhtmlcss

Seasonal selection tool

I need a quarterly date picker feature, ideally using Angular. I am interested in something similar to the example shown below: https://i.stack.imgur.com/9i0Cl.png It appears that neither Bootstrap nor (Angular) Material have this capability. Are there a ...

javascriptangular

What is the method for inserting form control values into a QueryString within HTML code?

Struggling with passing HTML form control values into a QueryString for page redirection. While I can easily input static values into a QueryString and retrieve them using PHP's GET method, I am encountering difficulties when it comes to dynamic valu ...

phpjavascripthtmlquery-string

Troubleshooting routing: The Location.path() function consistently returns an empty string

I stumbled upon this tutorial which seems to be the most up-to-date example for testing routing. I'm eager to incorporate mock components in my testing strategy eventually. Unfortunately, when trying out the provided plunker, I encountered some issues ...

angularangular-routingangular2-testing

Incorporate a JavaScript script into an Angular 9 application

I have been experiencing issues trying to add a script.js file to angular.json and use it in one component. Adding a script tag directly to my HTML file is not the ideal solution. Can someone suggest an alternative approach or point out what I may be missi ...

javascriptangulartypescripttags

The image spills out of its confines

Looking to create a dialogue box that fills the entire width and height of the screen? Want to divide its content into two sections - an image and a footer area with 2 rows of height? Struggling to contain the image within its designated space without over ...

htmlcsstailwind-css

Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

My website has tooltips enabled, but I am looking to hide the tooltip pop-ups that appear specifically over youtube video embeds. Upon inspecting the webpage, I found the code snippet below that is associated with youtube videos: <div data-tippy-root id ...

javascripthtmljquerycss

How can we efficiently link data to custom objects (models) within a different class while fetching data from the server using the http.get() method in Angular CLI?

Currently in the process of developing an Angular-Cli application that involves multiple models with relational data tables. When fetching data from the server, I need to map this data to corresponding model objects. I've experimented with creating a ...

angulartypescripthttp-get

Issue with IE11: Flexbox with absolute positioning not sizing correctly, fills entire width instead of individual content

Here's a simple case to reproduce the issue: <div style="display: inline-block; position: relative; border: 1px solid black;"> short <div style="display: flex; position: absolute; border: 1px solid black; top: 100%; lef ...

htmlcssflexboxinternet-explorer-11

How to prevent unnecessary new instances from being created by the Inject() function in Angular

Can someone please clarify if the inject() function provides different instances of a service? I suspect this might be why my code is not functioning as expected. Let's examine the code snippet below: { path: 'recipes', comp ...

angulartypescript