Is there a way to adjust the position of a Bootstrap 5 dropdown menu in real-time using javascript or jQuery?

Within my web app, I have implemented dynamically generated Bootstrap 5 dropdown menus that can sometimes be extensive. To optimize screen space usage, I am seeking a way to alter the offset computed by Popper.js through javascript. Unfortunately, I have encountered challenges in achieving this as the Popper.js documentation lacks clarity on this matter, and there are no resources on how to accomplish this within Bootstrap 5. (The data-bs-offset attribute is not suitable as it does not support dynamic offset values through a function).

You can review the code example on JSFiddle at https://jsfiddle.net/Martin_ATS/cqw5mjLv/3/. While I am able to access the Dropdown object using bootstrap.Dropdown.getInstance() and jQuery $(ddelem).dropdown(), altering the offset through javascript has proved to be challenging, despite attempts to utilize setOptions() and similar methods.

My aim is to leverage the computed y offset from Bootstrap/Popper, while adjusting the x offset to align the menu closer to the left margin and creating a right margin instead of being flush against the right window edge. The provided code snippet is a simplified example, with the actual dropdown menu contents varying from small to extensive, possibly requiring horizontal or vertical scrolling.

Any assistance on this matter would be greatly appreciated!

javascriptpositiondropdownbootstrap-5popper.js

Answer №1

Retrieve the Popper instance (referred to as _popper within the dd instance) and proceed to define the offset within the modifiers array...

        var dd = bootstrap.Dropdown.getInstance(evt.relatedTarget);
        console.log(`shown.bs.dropdown ${evt.relatedTarget.id}`);

        var $ddelem = $(evt.relatedTarget);
        dd._popper.setOptions( {modifiers: [
             {
                 name: 'offset',
                 options: {
                   // Calculate and specify the required offset here..
                   offset: [30, 10],
                 },
             },
        ]})

Demo

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

Using Jquery to drag and drop items into a specific target zone

Check out my Jquery code: $(".list").draggable({helper: 'clone', cursor: 'hand'}); $(".drop1").droppable({ accept: '.list', hoverClass: 'dropareahover', drop: function(ev, ui){ var targetId = $(this) ...

javascriptjquerydrag-and-drop

Incorporating new elements onto the page without causing the existing elements to re-render

My challenge involves working with a large array of objects, where each object corresponds to one element. To display these elements on the page, I utilize the map() function, but currently only the first 5 elements are being rendered initially. In order t ...

javascriptreactjs

Utilizing cross-domain AJAX for JSON requests

I'm currently on the website site.com attempting to retrieve some JSON data from my node.js server running on port 8080. Encountered this particular error message: XMLHttpRequest cannot load http://site.com:8080/json/1. Origin http://site.com is not ...

javascriptjqueryajaxcross-domainbackbone.js

When sending an AJAX request to a URL, can I verify in the PHP page whether it is a request or if the page has been accessed?

In order to enhance security measures, I need to prevent users from accessing or interacting with the php pages that will be utilized for ajax functionality. Is there a method available to determine if a page has been accessed through an ajax request or b ...

phpjavascriptjqueryajax

Modify the css of the initial div following a live click

After clicking on the span.submit-comment, I am looking to modify the CSS of a specific div. Can anyone advise me on how to achieve this? I attempted to change the background color of the div in the success section of the script like so: $('div.new ...

javascriptjqueryajax

Resolve the conflict with the upstream dependency when installing NPM packages

I'm encountering an issue while attempting to npm install vue-mapbox mapbox-gl - I keep getting a dependency tree error. Just to provide some context, I am utilizing Nuxt.js SSR with Vuetify and have not installed anything related to Mapbox before ru ...

javascriptnode.jsnpmdependenciesmapbox

Monitor the fullscreenChange event with angularJs

Utilizing a button to activate fullscreen mode for a DOM element using the fullscreen API is functioning correctly. The challenge arises when exiting fullscreen mode, requiring the listening for the fullscreen change event in order to resize the DOM elemen ...

javascriptangularjslistenerfullscreen

What is the best way to have a div gradually glide out (utilizing CSS's transition feature) upon the click of a particular button?

I want the hint-bubble div to smoothly slide out (using 'transition: 0.5s') whenever the hint-btn is clicked. I have successfully implemented it so that the hint-bubble appears when the button is clicked, but it appears instantly and I am struggl ...

javascripthtmlcss

My SF2 app is experiencing issues with AngularJS integration

I am currently developing a straightforward API using Symfony2 and now I am experimenting with integrating AngularJS into my bundle to visualize the results of my API calls. How can I effectively implement AngularJS? I initiated a bundle via app/console ...

javascriptphpangularjssymfony

Managing the vertical space within a nested accordion section

I've built a custom accordion component, but I'm encountering scrolling issues when trying to use nested levels within the accordion. I'd like to prevent scrolling inside the accordion section and instead have the page scroll below it. Any ...

javascriptcssreactjs

How can I effectively separate the impact of Next.js onChange from my onClick function?

The buttons in my code are not functioning properly unless I remove the onChange. Adding () to my functions inside onClick causes them to run on every keystroke. How can I resolve this issue? In order to post my question, I need to include some dummy text. ...

javascriptreactjsnext.js

Update the innerHTML content dynamically every 5 seconds with Vue.js

I'm working on a new website and I'd like to spice things up by changing the header text with a random word every 5 seconds. Here's the starting point: const header = document.querySelector('.header') const needs = ['jacket& ...

javascripthtmlvue.jsvue-component

The extracted text from the window appears to be blank

When attempting to enclose a selected string between two characters, I am encountering an issue. For example, when selecting 'test' and clicking on the change button, the selected text should change to 'atestb'. However, although I am a ...

javascriptangulardom

Applying a class change in Vue.js upon mounting

How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...

javascripthtmlcssvue.jsvuejs2

Black textures with images sourced from the same domain - Cross-origin

Despite trying numerous solutions and tips to resolve the cross-origin issue, I still can't seem to fix it. There are no errors, the images are hosted on the same domain as the webgl test, but the textures appear black. Occasionally when I refresh rep ...

javascripthtmlthree.js

Using THREE.js: Finding the nearest point between two rays in a THREE.js environment

In my current project with THREE.js, I am working with two THREE.Ray objects. Both rays have an origin point represented by a Vector3 and a direction indicated by another Vector3. I am currently exploring how to determine the nearest intersection point be ...

javascriptthree.jscomputational-geometry

Struggling to make React respond to button clicks without resorting to using addEventListener

Can anyone help me figure out why I can't get the onclick handler to execute in reactjs when specifying it inline for a button? The only solution that worked for me was using addEventListener. From what I understand, this code should work: <button ...

javascriptreactjspreact

Check if a user is currently on the identical URL using PHP and JavaScript

In my Laravel and AngularJS project, I have a functionality where users can view and edit a report. I'm looking to add a feature that will prevent multiple users from editing the report at the same time - essentially locking it while one user is makin ...

javascriptphpajaxangularjslaravel

An error occurred while trying to upload the image: Undefined property 'subscribe' cannot be read

Recently, I implemented a create post function that allows users to fill in the title, content, and upload an image. However, I encountered an issue where the progress bar fills up and the image gets uploaded to Firebase successfully, but it doesn't a ...

javascriptangular

The sequence of initializing test hooks in inconsistent playwright tests

My testing framework setup looks something like this: test.describe("...", () => { let p: Page; test.beforeEach(async({browser}) => { p = await (await browser.newContext()).newPage(); } test(...); test(...); test.aft ...

javascripttypescripttestingplaywright