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

On iOS devices, background images may not appear in the Home Screen after being added

My CSS code looks like this: #thumbnail { background-image: url(bla.jpg), background-size: cover, background-repeat: no-repeat; background-position: 50% 50%; } While it displays fine on iOS Safari and other platforms, the image does not s ...

javascripthtmlioscsssafari

How to create a CSS animation that gradually darkens a background image during a

Currently in the process of constructing a page with an intriguing background image: body { background:url(images/bg.png) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; ...

javascriptjquerycsscss-animations

The value of the variable is failing to be included in the Ajax request being sent to the server via jQuery

I'm encountering an issue with my contact form where I can't seem to retrieve the $_POST values via ajax for saving to a text file. It seems like there might be a problem with my javascript code. Check out the jQuery code snippet below: functio ...

phpjqueryhtmlajax

The Sublime/TAG feature "Eliminate Selected Attributes from Tags" does not support the removal of "data-reactid" attributes

I am attempting to utilize TAG in Sublime Text 3 -- https://github.com/titoBouzout/Tag When I apply the "Remove Picked Attributes From Tags (in Document)" feature with class it successfully eliminates all class attributes. However, when I use it with ...

htmltagsattributessublimetext3

Harvesting information from an HTML table

I have a table displaying the following values: turn-right Go straight turn-left How can I extract only the 2nd value, "Go straight"? Here is the code snippet I tried: var text = $('#personDataTable tr:first td:first').text(); The code above ...

javascriptjqueryhtml

What is the best way to focus on a specific section of a CSS class name?

Successfully Working Example: HTML: <div class="items"> <div class="item">item 1</div> <div class="prefix-item-suffix">item 2</div> <div class="item">item 3</div> < ...

javascriptjquerycss

CSS: Element with overflowing content fails to display even with the overflow set to visible

I'm trying to enhance a fixed toolbar by adding a dropdown menu, but the .toolbar-dropdown-menu component isn't displaying correctly, as shown in this screenshot (tested on Google Chrome 80.0): https://i.stack.imgur.com/r5Cz0.png Initially, it ...

htmlcssoverflow

Unable to apply a dotted border to a horizontal rule when a Bootstrap 5 link is present

As I strive to add a dotted border-style to the horizontal rule on my website, an interesting challenge arises when the Bootstrap-5 CDN is included. The border-style does not take effect as expected. Even on Codeply, the border-style works perfectly until ...

htmlcsswebbootstrap-5

What is the best way to compile an array of permissible values for a specific CSS property?

One interesting aspect of the CSS cursor property is its array of allowed values, ranging from url to grabbing. My goal is to compile all these values (excluding url) into an array in JavaScript. The real question is: how do I achieve this without hardco ...

javascriptcss

Eliminate the golden hue from the input field when autofill is activated

Can anyone help me figure out how to get rid of this unsightly chrome background that appears when autofill is enabled? (See below for reference.) I've attempted the following solutions: *:focus { outline: 0; } input:-webkit-autofill { -webk ...

htmlformscssinput

CSS code for targeting specific screen sizes in the Bootstrap grid system

I'm not an expert in styling, but I often use Bootstrap for small projects. Currently, my main challenge lies within the grid system. With one monitor at a 1920x1080 resolution and another at 1366x768, I find myself wanting to adjust the grid system b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Implementing Conditional Display of Span Tags in React Based on Timer Duration

In my current React project, I am facing an issue with displaying a span tag based on a boolean value. I need assistance in figuring out how to pass a value that can switch between true and false to show or hide the span tag. I tried two different methods ...

javascripthtmlreactjs

Encountering issues with MatToolbar in Angular 9 causes unexpected errors

Running Angular version 9.2.0 Encountering an issue while importing the MatToolbarModule in a module and utilizing it in the HTML template. The error message reads as follows: This could indicate that the library (@angular/material/toolbar) that declar ...

angularangular-material

Make sure the top edge of your Bootstrap 4 dropdown menu is perfectly aligned with the bottom edge of your

Trying to make a Bootstrap 4 navbar dropdown display right below the navigation bar, but it consistently shows slightly above the bottom edge of the navbar. Is there a way to make this happen without fixing the height of the navbar and using margin-top fo ...

htmlcsstwitter-bootstrap

Creating a number of arrays based on the row of a .CSV file can be accomplished in Angular by utilizing the

Implementing an Angular template to read .CSV files and generate a table involves creating two separate files: one for the header and another for the table content. For the header CSV file: header.csv https://i.stack.imgur.com/ojMo6.png For the table da ...

javascriptarraysangulartypescriptcsv

When attempting to test the service, an error occurred stating "subscribe is not a

Currently, I am working on writing a Jasmine test for testing service calls in Angular. To spy on the service, I have used jasmine.createSpyObj. However, I encountered an error message: this.agreementsService.getOutstandingAgreements(...).subscribe is not ...

angularjasmine

Tips for adjusting the progress bar to 100% and back to 0%

My goal is to increase the progress bar percentage with each click. Currently, it only goes up to 75%. When saving, it should show 100%, but it's not displaying that properly. On clicking the back button, it should reset to 0% on the third click. HTM ...

javascripthtmlcss

Interactive form control for location details including country, state, district, and town

I am struggling with adding dynamic form controls on dropdown change. I have been able to add them, but encountered an error preventing me from retrieving the value in 'formName.value'. The specific error message states: "Error: There is no Form ...

javascriptangulartypescript

I am unable to process the information and transform it into a straightforward list

When using ngrx, I am able to retrieve two distinct data sets from storage. private getCatalog() { this.catalogStore.select(CatalogStoreSelectors.selectAllCatalogsLoadSuccess) .pipe( takeWhile(() => this.alive), take(1), ...

angulartypescriptrxjsobservable

What is the best way to iterate through only the selected checkboxes to calculate their

I am in need of calculating the selected checkboxes only within a table field (harga_obat*jumlah) Below is my foreach data: @foreach ($obat as $o) <tr> <td> <input id="check" type="checkbox" name="select[]" value="{{ $o->nam ...

javascripthtmllaravelcheckbox