The dropdown menu is extending beyond the edge of the screen

I'm having trouble with my navbar dropdown menu extending off the page to the right.

Take a look at the code below:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2e342a342a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">PEL</a>
  <div class="btn-group">
    <button
      type="button"
      class="btn btn-secondary dropdown-toggle mr-3"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false">${pseudo}</button>
    <div class="dropdown-menu dropdown-menu-right">
      <button
        class="dropdown-item dropdown-menu-right"
        type="button">Action</button>
      <button
        class="dropdown-item dropdown-menu-right"
        type="button">Another action</button>
      <button
        class="dropdown-item dropdown-menu-right"
        type="button">Something else here</button>
    </div>
  </div>
</nav>

While the dropdown functionality is working properly, it always extends beyond the screen on the right side...

https://i.sstatic.net/Hv9AW.png https://i.sstatic.net/FNp6p.png

There appears to be some excess spacing created by the dropdown menu on the right side of the page.

Answer №1

Based on the v4.0 documentation :

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

Note: Dropdowns are positioned using Popper.js (except when inside a navbar).

Here are two options:

  1. Update to the latest Bootstrap version. It works well with v4.6
  2. Use custom classes instead of the Bootstrap navbar

[UPDATE 1] Below is a functional example with Bootstrap v4.6. Also, the mr-3 class has been removed for improved display.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26262d2e292b2839097d677f677b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">


<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">PEL</a>
  <div class="btn-group">
    <button
      type="button"
      class="btn btn-secondary dropdown-toggle"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false">${pseudo}</button>
    <div class="dropdown-menu dropdown-menu-right">
      <button
        class="dropdown-item"
        type="button">Action</button>
      <button
        class="dropdown-item"
        type="button">Another action</button>
      <button
        class="dropdown-item"
        type="button">Something else here</button>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="046e757161767d44372a312a35">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c1dbc3dbc7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

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

Updating the styles of React Native components using stylesheets

I've created a unique React component with the following structure: import { StyleSheet } from 'react-native'; import { Input, Item } from 'native-base'; import Icon from 'react-native-vector-icons/FontAwesome'; import { ...

Using Python in Django to seamlessly add products to the shopping cart

Seeking guidance in creating a simple function that can capture the product ID and insert it into the user's shopping cart upon clicking the "add to cart" button. I have already set up the shopping cart table and the product table but am struggling to ...

When hovering over items in the navigation bar, the entire bar expands seamlessly

I've spent countless hours trying to troubleshoot an issue with my dropdown menu that expands whenever I hover over it. The bar stretches out to accommodate the list of dropdown contents and then reverts back to normal when I move my cursor away. My a ...

Uncovering the hidden treasures of checkbox values using jQuery

I've encountered an issue with a form containing checkboxes. Some values are meant to be true by default, so I've hidden them using the following method: <input type=checkbox name="<%= _key %>" checked="checked" style="display:none" /& ...

Displaying JavaScript Countdown in PHP Table

I have a database table with multiple fields and I am looking to create a countdown using the integer value from one of the fields (in minutes). How can I loop through and display the countdown for each row in a PHP table utilizing these values, with the a ...

Emphasize the search term "angular 2"

A messenger showcases the search results according to the input provided by the user. The objective is to emphasize the searched term while displaying the outcome. The code snippets below illustrate the HTML and component utilized for this purpose. Compon ...

My website was unexpectedly adorned with an additional quotation mark by Chrome

Unexpectedly, Chrome inserted a quote that was not part of my code. Upon pressing F12 in Chrome, the added code is revealed. This extra quote caused a mysterious space at the top of my website. Removing the unnecessary quotes resolved the issue and everyt ...

Switch between visibility of objects with toggle button

I have set a background image on the body, and positioned a large box, footer, navigation bar, and header above it. In order to add functionality to slide these elements up and down, I've created two buttons with classes 'slideUp' and &apos ...

How can I convert a background image source into a fluid list item with a display property of inline-block?

I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a wi ...

Building a dynamic tab menu using JavaScript: A step-by-step guide

In order to generate dynamic tab menus with JavaScript, I am seeking a solution that does not rely on jQuery as it may not be supported by all mobile devices. Any advice for replicating the same functionality using pure JavaScript would be greatly apprec ...

How to circumvent an email forwarder that removes attributes from an image tag and still track email opens?

While it may seem like an impossible task, I decided to give it a try. If the service I am utilizing removes the attributes of an image tag =>, is there a workaround available? I attempted inserting random unicode characters to disrupt the parser, but ...

The CSS styles on my GitHub Pages website are not being reflected on the HTML page

I've been struggling for a while now to host my Portfolio CV on GitHub and I can't seem to get my CSS styles to apply correctly on the URL. - This is how I have linked it in the HTML document: <link rel="stylesheet" type="text/ ...

Steps to make a pop-up window for text copying by users

On my website, I have a link that users need to copy for various purposes. I want to provide an easy way for them to see the link and then manually copy it to their clipboard. Instead of using code to copy to the clipboard, I am looking for a solution whe ...

Having trouble getting the items to show up on the canvas

I have been struggling to implement JavaScript on a canvas in order to display mice in the holes using the mouse coordinates. Despite trying many different methods and spending close to a month on this project, I still can't seem to get it to work acr ...

What advantages does Snap.svg offer compared to the HTML5 native SVG DOM API?

Can the differences between Snap.svg and HTML5 native SVG DOM API be compared to jQuery vs HTML5 native DOM? Apart from potential cross-browser disparities, assuming modern browsers support SVG well, what advantages does Snap.svg offer? What are the pros ...

Switch up the appearance of a document by manipulating the stylesheet using a select tag

I'm currently facing an issue with the implementation of a drop-down box on my website for selecting different themes. Despite having the necessary javascript code, I am unable to get it working correctly. Here's the snippet: //selecting the sele ...

Having trouble with the move_uploaded_file function in PHP?

I have been actively studying PHP and am currently working on a CMS project. I have encountered an issue with image uploading. PHP if ( $_POST['img']) $uploads_dir = '/images'; $tmp_name = $_FILES["img"]["tmp_name"]; $name = $_FIL ...

I am facing issues with applying my CSS styles to my PHP include files correctly

After facing an issue with my previous post due to unclear information and improper code presentation, I realized that the root cause was not related to a duplicate question. So, here is a new post with detailed information. In my project, I have created ...

Is there a way to add CSS styles to all div elements except for those that are contained within a parent div with a certain class

I have a universal CSS that impacts all div elements, but I need to exclude the divs within a parent div that has a specific class, like in this instance where it's the "should-not-apply" class. div { font-size: 20px !important; font-weight: 50 ...

Removing Delivery Address and Method From Checkout Page in OpenCart 2

Is there a way to remove "Step 2, Step 3: Billing Details" from the Checkout Page in OpenCart 2.0? I have searched for solutions online but haven't found one specifically for OpenCart 2.0. This is what I tried: <div class="panel panel-default" s ...