Incorrect positioning of dropdown menu when using Bootstrap 4 and translate3d() function

Having multiple bootstrap 4.4.1 dropdown menus, each within a column which is functioning correctly except for the position calculation. Example of HTML col:

<div class="container">
  <div class="row">
    <div class="col">
      <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="snl-68778" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="btn-txt">TEXT</div><div class="chevron-wrapper"><svg class="chevron"><use xlink:href="/img/chevron-white.svg#chevron"></use></svg></div></a>

        <div class="dropdown-menu" aria-labelledby="snl-68778" style="">
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 1</a>
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 2</a>
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 3</a>
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 4</a>
          <a class="dropdown-item" target="_blank" href="#" tabindex="0">Link 5</a>
        </div>
      </div>
    </div>
   // more columns here
  </div>
</div>

CSS:

.btn,
.dropdown-menu {
    width: 100%;
}
.btn{
  display: inline-block;
  padding: 8px 15px;
  border: none;
  background: #E5392A;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 18px;
  text-transform: uppercase;
}
.dropdown-menu{
  margin-top: 0;
  border: 0;
  padding: 0 10px;
  background-color: #211D17;
}
.chevron-wrapper {
  vertical-align: middle;
  display: inline-block;
  width: 36px;
  height: 26px;
  border-left: 1px solid #fff;
  margin-left: calc(100% - 115px);
  padding-left: 10px;
}
.dropdown.show .chevron {
  transform: rotate(90deg);
}
.chevron {
  display: inline-block;
  width: 26px;
  height: 26px;
}

I have set up 5 columns and the issue I am facing is the positioning of the dropdown menu in the first and last columns:

1st: translate3d(5px, -244px, 0px);

5th: translate3d(-5px, -244px, 0px);

There seems to be a 5px shift to the left/right and I cannot pinpoint the cause. Even if I reduce the number of columns to 4, the same shift occurs on the first / last columns.

Is there a way to always force the first number in the calculated translate3d(5px, -244px, 0px) to be 0? I attempted using transform: translateX(0), but it overrides the entire translate3d() setting, not just X

Any suggestions?

htmlcssdrop-down-menubootstrap-4

Answer №1

After troubleshooting, I discovered the root cause of the issue in my situation. Bootstrap utilizes Popper to apply various CSS modifications for optimal visual presentation. The specific modifier responsible for the translation error was preventOverflow. It is crucial to ensure that your body, html, and potentially other parent elements are occupying all necessary space.

To resolve this issue, I adjusted the height of both html and body to 100%. However, on mobile devices, it only occupied 100% of the viewport height, which was less than the total page height. As a result, Popper.js mistakenly identified an overflow scenario.

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 Ajax to dynamically load page content into a div based on a selection made in a

How can I dynamically load content into a div using Ajax based on the selection made in a dropdown menu? For example, I have a select box with two options: test.HTML and test1.HTML. Below that, there is a div where I want to display the content from eithe ...

jqueryajaxhtml

Express.js - display the complete information

Trying to display an array of objects (highcharts points) is giving me some trouble. Instead of the actual data, I'm seeing [object Object]. It seems that JSON.stringify() doesn't play well with HTML. util.inspect also doesn't work as expe ...

javascripthtmlnode.jsexpress

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

I'm currently working on developing my own custom lightbox script, but I've hit a roadblock. For centering the wrapper div, I've utilized position: absolute and specified top / left positions by performing calculations... top: _center_ver ...

javascriptjquerycsslightboxcss-position

Searching for the clicked tr element within a tbody using jQuery

Here is my customized HTML table layout <table> <thead> <tr> <td class="td20"><h3>Client Name</h3></td> <td class="td20"><h3>Details</h3></td> ...

javascriptjqueryhtml

Creating a cutoff with CSS: A step-by-step guide

Is there a way to create something similar using only CSS? https://i.stack.imgur.com/N9c6W.png I have no clue on how to achieve this. Any assistance would be greatly appreciated. ...

css

When an input is double-clicked, the message"[object object]" appears on the screen

Here is the structure of the template used for the directive. Our code fetches data from a service which contains all the details of a specific individual. We display only the first name, last name, and either designation or company affiliation from that d ...

htmlangularjscssfirefox

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

I'm trying to incorporate a lightbox for video playback on a specific page of my CMS. I've placed my CSS file in JS/MY THEME/JQUERY/PLUGIN/VENOBOX/CSS/myfile.css and the JS files in JS/MY THEME/jquery/plugins/venobox/js/myfile.js, but it doesn&ap ...

javascriptcsslayoutmagento-1.9

Transforming a div into a clickable hyperlink

I have a JavaScript function that generates a div with a link inside it. Here is how the div and link are created: $('#info').find('#link').text("View"); //Creates a new link var eventLink1 = document.createElement('a& ...

javascriptjqueryhtml

CSS - Button with upwards pointing arrow, requiring it to point downwards when hovered over

Struggling with the following issue: I have a button with a downward-pointing arrow in its description. When I hover over the button (or any content within it), I want the arrow to point upwards. However, currently, the arrow only points up when I hover ...

htmlcss

Retrieve Checkbox within a Span using Jquery

Trying to achieve the selection of a checkbox when a user clicks on a div using jQuery. The provided fiddle shows my attempt: http://jsfiddle.net/5PpsJ/ The code snippet I have written so far is as follows, but it doesn't seem to select the checkbox ...

javascriptjqueryhtmlasp.net

Can I customize the color of an SVG image with CSS (jQuery SVG image substitution)?

This is my innovative solution for easily embedding and styling SVG images using CSS. Traditionally, accessing and manipulating SVG elements with CSS has been a challenge without the use of complex JS frameworks. My method simplifies this process, making ...

jquerycsssvg

VueJs causing Bootstrap Progress Bar to be Invisible in Browser

In my project using Vue2 (webpack-simple), I am attempting to incorporate a Bootstrap progress bar into a component. Even though the progress bar is displaying in the component, it lacks the visual progression indicated by aria-valuenow. I have included a ...

vuejs2bootstrap-4progress-barvue-component

How can I extract the page's output using JQuery?

Being a rookie in this area, I am eager to learn how to extract specific content from a page using AJAX in JQuery. Currently, I have been able to fetch the data of a page and display it as text: $.ajax({ type: "POST", url: "myfile.html", su ...

javascriptjqueryhtmlcssajax

Vue.js having compatibility issues with Semantic UI dropdown feature

I have recently started exploring Vue.js and I must say, I really enjoy using Semantic UI for my projects. In Semantic UI, dropdowns need to be initialized using the dropdown() function in semantic.js. This function generates a visually appealing HTML str ...

javascripthtmldrop-down-menuvue.jssemantic-ui

Adjust the appearance of a glyphicon by modifying its color according to various criteria

Using angularjs, I implemented ng-repeat to display details in a table. In the final column, I aim to display the glyphicon 'glyphicon glyphicon-stop' in a specific color. <tr ng-repeat="ps in $ctrl.personLst"> <td>{{ ps.id}}</td& ...

cssangularjs

How to retrieve FormData data using Axios

One challenge I'm facing is with an application that I have developed using VueJS, where users can upload files and send them to the backend. The process involves using Axios to send the file as FormData. However, once the file is received on the back ...

htmlexpresspostvue.jsaxios

Is there a way to modify just the homepage url of the logo on a WordPress website using the OceanWP theme?

My website, abc.com, is set up with Angular for the homepage and WordPress for the blogs. The WordPress site is located in a subfolder within abc.com. You can see the file structure in the image below. I am now looking to change only the homepage link on ...

htmlangularwordpress

PersistJS callback function is malfunctioning

I stumbled upon a great library for managing client storage. You can find the latest version here: https://github.com/jeremydurham/persist-js However, I encountered an issue with the callback function. var result = store.get('saved_data', func ...

javascripthtmlpersistjs

Having trouble with changing images or background images in JavaScript?

Encountering issues with dynamic elements. When I click a button, the following JS function is executed. It displays a stylish CSS alert upon postback and then runs the function. function scrollToTop(sender, args) { window.scrollTo(0, 0); document. ...

javascriptjquerycssimage

Issues with jKit Pagination (Controlling Size by Height)

I'm currently utilizing the jkit paginate feature to limit the number of items by height, with the setting at 910 pixels. Everything works fine when there is enough content to exceed this limit and create a second page. However, if the content falls ...

javascriptphpjqueryhtml