The dropdown menu from React Bootstrap is only partially visible when used within the datagrid

They say a picture is worth a thousand words, and what's bothering me now is this predicament:

https://i.sstatic.net/UGxyi.jpg

I apologize for the blurred text, but I can't disclose much due to company policy... As you can see in the screenshot, there's a dropdown menu (set to dropup) that isn't fully visible. This issue mainly arises with the first few rows or when there's limited data in the grid.

I've shared some code snippets on JSBin (though not functional examples), stripping out sensitive parts as mandated by company regulations. Hopefully, the provided code will offer some insight. Just to note, this project is built using React Bootstrap. The JSX snippets used, relevant CSS classes for the data grid, and HTML visible upon compilation have been included.

https://jsbin.com/wuvuhemewo/edit?html,css,js,output

I've lost track of everything I've attempted, from tweaking z-index everywhere (desperate times call for desperate measures) to trying every possible solution sourced from Google and Stack Overflow.

Here's what happens when I expand the elusive Options "dropup" menu:

<div class="datagrid__options-btn show dropup">
   <button aria-haspopup="true" aria-expanded="true" id="dropdown-basic-button" type="button" class="dropdown-toggle btn btn-link">Options</button>
   <div x-placement="top-start" aria-labelledby="dropdown-basic-button" class="dropdown-menu show" style="position: absolute; top: auto; left: 0px; margin: 0px; right: auto; bottom: 0px; transform: translate(2.4px, -16px);" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="top-start">
            <a href="#" class="dropdown-item" role="button">Option1</a>
            <a href="#" class="dropdown-item" role="button">Option2</a>
            <a href="#" class="dropdown-item" role="button">Option3</a>
            <a href="#" class="dropdown-item" role="button">Option4</a>
            <a href="#" class="dropdown-item" role="button">Option5</a>
            <a href="#" class="dropdown-item" role="button">Option6</a>
            <a href="#" class="dropdown-item" role="button">Option7</a>
</div>

UPDATE: I've recently discovered that overflow-x seems to be the culprit behind the hidden dropdown menu. Once removed from these two elements:

      <div class="dg-table__wrapper">
         <div class="table-responsive">

, the dropdown becomes visible. However, this causes the datagrid to widen excessively, and any attempts to add overflow simply conceal the dropdown again. Could it be that this is the root cause of the issue?

htmlcssreactjstwitter-bootstrapreact-bootstrap

Answer №1

It appears that the issue at hand is related to the overflow CSS property. While not explicitly stated in the documentation, you can address this by utilizing the popperConfig prop within the Dropdown.Menu component. By setting the menu's position to fixed and leveraging dynamic positioning with Popper.js (which React Bootstrap utilizes), you can achieve the desired result.

const popperConfig = {
  strategy: "fixed"
};

return (
  <div style={containerStyle}>
    <Row>
      <Dropdown>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Fixed Popper
        </Dropdown.Toggle>

        <Dropdown.Menu popperConfig={popperConfig}>
          <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
          <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
          <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
          <Dropdown.Item href="#/action-4">Something else</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
      ...

CodeSandBox Example: https://codesandbox.io/s/react-bootstrap-fixed-dropdown-popper-fqdnu?file=/src/App.js

Drop Directions Details:

Furthermore, within the same Popper.js documentation provided, there are additional techniques such as Utilizing Modifiers like Prevent Overflow that may offer alternative solutions to the issue, depending on the developer's UX perspective.

For those interested, I have also discussed an alternative approach using reactstrap instead of react-bootstrap in a recent post: Reactstrap DropdownMenu bottom overflow issue

Answer №2

Thank you to a helpful response found at . The suggested solution greatly assisted me in modifying my code:

const popperConfig = {
  strategy: "fixed"
};

<Dropdown id="dropdown-basic-button" drop="up" className="datagrid__options-btn">
              <Dropdown.Toggle variant="link">Options</Dropdown.Toggle>
              <Dropdown.Menu popperConfig={popperConfig}>
                {row.options.map((action, i) => {
                  return (
                    <Dropdown.Item
                      key={i}
                      onClick={(e) => {
                        e.preventDefault();
                        functions.doAction(action, row.originalIndex);
                      }}
                    >
                      {action}
                    </Dropdown.Item>
                  );
                })}
              </Dropdown.Menu>
            </Dropdown>

In addition, I discovered that adding style={{position: "static"}} to the DropdownButton element also works! However, I have chosen to follow the guidance of 95faf8e76605e973 as it appears to be the more accurate approach :)

<DropdownButton
     id="dropdown-basic-button"
     title="Options"
     variant="link"
     drop="up"
     style={{ position: "static" }}
     className="datagrid__options-btn"
    >

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

The caching functionality in the React server component is failing to store the results effectively

My issue involves a simple function that retrieves data asynchronously. Despite using the cache wrapper to prevent multiple calls, the function is being executed multiple times when the page loads. How do I ensure that the cache functionality works as ex ...

javascriptreactjscachingnext.js13react-server-components

Arranging the placement of the dropdown menu

I am struggling with positioning the items in my dropdown menu. The functionality itself is working perfectly, but the issue arises when it comes to aligning the dropped down items. Initially, I positioned them based on a smaller screen size, but when view ...

jqueryhtmlcss

Is CDATA insertion automatic in JavaScript within Yii framework?

Currently I am working with Yii and have noticed that whenever I insert any JavaScript code, it is automatically encapsulated in CDATA. I am curious as to why this is happening. Will there be any issues if I were to remove the CDATA tags, considering that ...

phpjavascriptjqueryhtmlyii

Leveraging an AngularJS variable within an iframe

Is it possible to use a variable inside an iframe src or ng-src attribute? I've tried different variables but none seem to be recognized. For example: <iframe ng-src="http://www.example.com/?name={{test}}"> </iframe> The variable test ju ...

htmlangularjsiframe

The WebView displays the source HTML using the loadDataWithBaseURL method instead of showing a rendered view

I am currently working on an application that utilizes WebView to display custom HTML content. However, I am facing an issue where when I execute the following code: loadDAtaWithBaseURL(URL, "<html><h1>TEST</h1></html>", "text/htm ...

androidhtmlandroid-webview

What is the best way to dynamically resize the content inside a div element based on its dimensions using

My challenge is to create a centered div on the page that resizes with the viewport while maintaining an aspect ratio of 16:9. However, I also need the font and content inside the div to scale proportionally as it resizes. Using vmin works well in most cas ...

javascripthtmlcss

Establish a seamless UDP connection using JavaScript and HTML5

Is it feasible to establish a direct two-way connection with a UDP server using javascript/HTML5 (without node.js)? While WebRTC is an option, my understanding is that it does not support sending datagrams to a specific server. I am primarily focused on c ...

javascripthtmludpwebrtc

Executing unique calculations on Kendo UI Grid Columns

For experienced users, this may seem simple, but as a newcomer, I'm struggling with a basic arithmetic task. I want to multiply one of the column values (DealValue) by 0.05 in my Kendo grid setup. Despite looking through the Kendo docs, I couldn' ...

javascriptjqueryhtmlkendo-uikendo-grid

WebSocket cannot establish a connection with any address besides 127.0.0.1 or localhost

I built a test app that consists of both an HTML5/WebSocket client and an HTTP/WS server. The servers are written in C#, with my own simple HTTP server and a WS server based on concepts from . The HTTP server listens on 0.0.0.0:5959, and the WS server is l ...

htmlwebsocket

The chosen option does not seem to be displaying in the <select> menu

I am currently working on a dynamic checkbox creation feature for my django project, and here is what I have so far: <form action="#" method="post" target="#"> {% for node in Last_val_nodes %} <input type="checkbox" name="{{node.0}}" ...

htmldjango

constant element within mat-menu in Angular

This coding snippet displays unread notifications to users: <mat-menu #menu="matMenu"> <div class="menu-item" mat-menu-item *ngFor="let item of notifications"> ...item content </div> <b ...

cssangularangular-material

Adjust the Bootstrap 4 HTML code to eliminate the rounded edges on the parallax jumbotron

I am currently working on a captivating parallax effect for my homepage, but I'm looking to eliminate the rounded corners from the images. Below is the HTML code for one section: <div class="jumbotron paral paralsec1"> <h1 class ...

cssbootstrap-4

Fill in the text field according to the option selected from the dropdown menu

I have a function in my JavaScript code that is supposed to fill a textbox based on the selection made in a drop-down menu. Here is an example with just one option out of eight: <script> function UpdateQuantity(){ if (document.getElementByID("Raff ...

javascriptjqueryhtml

Sharing a variable between a component and the index in real-time with ReactJS

My goal was to pass functions from index.js and have them executed in dashboard.js using props. However, now I want to achieve the opposite - I want the <h1>{projectName}</h1> in index.js to be updated when there is input in a textfield. Unfort ...

javascriptreactjsnext.js

Trouble fetching asynchronous data in Next.js Higher Order Component

Currently, I am in the process of creating a Higher Order Component (HOC) that will fetch user data from my API and then provide props to the wrapped component. This will allow the component to redirect the user based on their role. Although the HOC appea ...

javascriptnode.jsreactjsnext.jsserver-side-rendering

Is there a way to enclose hashtags and Twitter usernames in a link?

Currently, I'm developing an application that allows users to create posts and mention other users by using hashtags in the post. When retrieving the list of posts through an API call, the challenge arises on how to wrap these hashtags and usernames w ...

reactjsnext.jsnext-linkreact-link

I am experiencing issues with a few of my design choices not functioning correctly

I am facing issues with some of my styles. I have put in a lot of effort, but there seems to be a problem with my menu. The last part of my CSS is not functioning correctly. When hovering over the menu content, I want it to turn black and... #site_menu { ...

htmlcss

React.map does not retrieve the specific value

I am facing an issue with my list of items. I have implemented it using mui list, and I have also added a button for editing the list. However, when I click on an item, I am getting the value of the last item instead of the one I clicked on. Below is my f ...

javascriptreactjsmaterial-ui

Empty data being displayed in PHP backend when using Axios and ReactJS

I am utilizing the following Axios Reactjs code to send form data to a PHP backend. Upon checking the record.php file from the Chrome browser's console and network, it indicates that the connection is fine but the posted data is empty. It seems like ...

phpreactjsaxios

Having difficulty retrieving a nested child element with querySelector in JavaScript

Encountering an issue with the querySelector method in JavaScript when accessing nested child elements. The goal is to retrieve the first child of a selected element and then obtain the first child of that inner element. Attempted code: let selected = doc ...

javascripthtmldom