Using Bootstrap4 to create dropdown menus within fixed table cells

I am currently utilizing Bootstrap 4 to construct a table with an action column housing a dropdown menu. My objective is for that specific column to remain fixed in place, ensuring it remains visible even when there is horizontal scrolling.

The issue I am facing pertains to the behavior of the table cells once the dropdown menu is activated. Subsequent cells appear to be on a different layer compared to the one containing the dropdown. Cells following the opened dropdown seem to hover above it, while those preceding it sit below.

Despite my efforts to adjust the z-index of both the cell and the dropdown, I have been unsuccessful in rectifying this inconsistency.

.action {
  position: sticky;
} 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a0adadb6b1b6b0a3b282f6ecf4ecf3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90fae1e5f5e2e9d0a3bea5bea1">[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="e4868b8b909790968594a4d0cad2cad5">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
          <th scope="col">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          <td class="action" style="position: sticky">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                Menu
              </button>
              <div class="dropdown-menu" 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>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
          <td class="action" style="position: sticky">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                Menu
              </button>
              <div class="dropdown-menu" 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>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
          <td class="action">
            <div class="dropdown" style="position: sticky">
              <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                Menu
              </button>
              <div class="dropdown-menu" 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>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

Your assistance is greatly appreciated.

htmlcssbootstrap-4dropdownsticky

Answer №1

Here is the content:

<link rel="stylesheet" href="https://cdn.example.com/bootstrap.min.css" integrity="sha384-samplehash" crossorigin="anonymous">
<script src="https://cdn.example.com/jquery.slim.min.js" integrity="sha384-samplehash" crossorigin="anonymous"></script>
<script src="https://cdn.example.com/bootstrap.bundle.min.js" integrity="sha384-samplehash" crossorigin="anonymous"></script>
<table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
          <th scope="col">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          <td class="action" >
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle"  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                Menu
              </button>
              <div class="dropdown-menu"   style="z-index:1;position: relative;" 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>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
          <td class="action" >
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle"   type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                Menu
              </button>
              <div class="dropdown-menu"   style="z-index:1;position: relative;" 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>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
          <td class="action">
            <div class="dropdown" >
              <button class="btn btn-primary dropdown-toggle"    type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                Menu
              </button>
              <div class="dropdown-menu" style="z-index:1;position: relative;" 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>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

For further details, visit :https://example.com/sample-link

Answer №2

Consider applying the following code to your CSS:

.table td.action {
    position: sticky !important;
    right: 0;
}

To adjust the dropdown position, you can also include:

.table .dropdown-menu.show {
     transform: translate3d(0px, 36px, 0px) !important;
}

For further information, check out: 

$( ".dropdown" ).click(function() {
 $( "td.action" ).css( "z-index", 0 );
 $( this ).parent().css( "z-index", 1 );      
});
.table .action {
    position: sticky !important;
    right: 0;
}
/*To enable horizontal scrolling:*/
.table td, .table th {
    min-width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2968c948c93">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91fbe0e4f4e3e8d1a2bfa4bfa0">[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="e0828f8f949394928190a0d4ced6ced1">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
          <th class="action" scope="col">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          <td class="action">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                Menu
              </button>
              <div class="dropdown-menu" 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>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
          <td class="action">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                Menu
              </button>
              <div class="dropdown-menu" 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>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
          <td class="action">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                Menu
              </button>
              <div class="dropdown-menu" 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>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

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

Leverage AJAX variables directly within the HTML page

In my application, I have incorporated an Input type="date" field to capture date values from users. However, I need to send the value of the date as "sdate" in the URL used in the action method, as illustrated below. My goal is to post the value of the In ...

phpajaxhtmljquery

Incorporate personalized fonts onto your website

After downloading the Arimo font from Google Fonts, I decided to create a master page and a stylesheet for it. Here is the code I wrote: @font-face{ font-family:"Arimo"; src: url('../Fonts/Arimo/Arimo-Regular.ttf'),format('truetype& ...

cssfonts

Creating a secured page with Node.js and Express: Password Protection

I am a beginner with node.js/express! Currently, I am working on developing a chat site along with a chat admin site. When I navigate to _____:3000/admin, it prompts me for a password through a form. I am looking for a way to verify if the entered passwor ...

javascripthtmlnode.jsexpress

Using Flexbox to style an h2 heading and a button

I'm diving into React.js and flexbox, trying to center an h2 and a button in a flexbox layout. Despite using justify-content: center, margin: auto, and text-align center, I can't get the formatting right. I know I must be missing something, but I ...

htmlcssreactjs

The Safari browser restricts interaction with password inputs but allows interaction with other types of input fields

My password input field is styled like this: <input class="genericButton" id="login-password" type="password" name ="password" placeholder="Password"> While everything functions correctly in Chrome, I encounter an issue with Safari. When I try to i ...

javascripthtmlcsssafaripasswords

Is the JavaScript Base64 image data damaged or compromised?

My current task involves selecting an image through an HTML Input and then retrieving the image using Javascript to obtain its Base64/Image Data string. However, the code I have implemented is only returning a partially corrupt or invalid representation o ...

javascriptjqueryhtmlimagebase64

Unable to assign the value of 'innerHTML' to a null property during an AJAX request

I have searched through numerous articles on this site, but I haven't been able to find the solution I'm looking for. Every time I click a cell in my custom div table, I receive the frustrating message "Cannot set property 'innerHTML' ...

javascriptphphtmlajax

Exploring the Difference Between :nth-child(even|odd) and :nth-child(int) CSS Selectors

Encountering a challenge with the CSS :nth-child pseudo selector and suspecting that something crucial has been overlooked. index.html <html> <head>...</head> <body> <div class='selector'>first</di ...

htmlcsscss-selectors

Excessive padding on labels and insufficient padding on input fields in Bootstrap 4 mobile view

Having a simple password field using Bootstrap grid classes: <div class="container"> <div class="row"> <label class="col-sm-2" for="passwordField">Password</label> <input class=&q ...

htmlcssbootstrap-4

What is the process to showcase a database value in a particular index of an HTML table?

I am looking for assistance with displaying selected data values from a database into specific positions in an HTML table. I have managed to write the code that displays the data, but it only shows up at index 0 on the table. Does anyone know how to make ...

phphtmlajaxselecthtml-table

When the text exceeds its container, the CSS property overflow will display only the

.example{ overflow:auto; } <div class="example"> <p>Some Additional Text Here<P> </div> This particular code snippet showcases the initial portion of the text, allowing for scrolling down to reveal items 5 and 6: 1 2 ...

htmlcss

Tips for altering text size within Angular Material form fields with floating placeholder

Looking to customize the font size of the placeholder text in an Angular Material form field? You can set two different font sizes: one for when the placeholder is normal and one for when it floats. Here's how you can achieve this: <mat-form-fiel ...

cssangularformssassangular-material2

Polyfill for the :nth-column CSS4 Grid-Structural pseudo-class

In my CSS grid layout, I want to include a margin in every even column. While the :nth-column pseudo-class would be ideal for this, it unfortunately won't be supported in the near future. Could anyone recommend any polyfills that I could utilize, or ...

csscss-selectorscss-gridpseudo-classpolyfills

Tips for creating a full-width fixed header

I've implemented a fixed header in a bootstrap container and I'm attempting to make the header fill 100% of the width without any margins or paddings. Here's a snippet of the HTML structure: <div class="container-fluid"> <div c ...

htmlcssbootstrap-4

Updating the material-ui checkbox state to reflect the checked, unchecked, or indeterminate status, can be achieved in reactjs without relying on state

I am currently using Material-UI checkbox components and I have a requirement to programmatically change the state of checkboxes to be checked, unchecked, or indeterminate based on the click of another checkbox. This action needs to be applied to a list of ...

javascripthtmlreactjscheckboxmaterial-ui

Listener for resizing events in jQuery implemented in a separate script file

One issue I am facing is separating my jQuery code from my HTML page, especially when it comes to the resize event. I have an index.html file and a main.js file where I prefer to keep all of my jQuery code. The problem arises when the resize event does no ...

javascriptjqueryhtml

Adjusting the size of images in real time

Currently, I am in the process of creating a Fluid grid style website and I am looking to decrease the size of all images by 75% when the screen is below 1280px, 50% at 800px, and so forth. Is there a way to achieve this using the IMG tag? My attempt so ...

javascriptphphtmlcss

Exploring the differences between two string variables in JavaScript

While attempting to compare two strings using JavaScript, I encountered the following code: var statuss = document.getElementById("status").innerHTML; //alert(statuss); var s =statuss.toString(); var ss= "Active"; if (s === "Active"){ aler ...

javascriptjqueryhtmlcss

The accuracy of real-time visitor numbers in Google Analytics is often unreliable

My website uses Google Analytics to track the page chat.php. The code snippet is correctly placed on the page according to the documentation. Within this page, there is a Flash object that connects users to an IRC chat room. Currently, there are 50 unique ...

javascriptphphtmlgoogle-analytics

Running a JavaScript file enclosed within an AJAX response

I have a web application built with HTML5 that utilizes jquery 3.2.1. Within the application, there is a search feature that makes an ajax request. The response from this request includes HTML code, which contains a <script> tag linking to a js file ...

javascriptjqueryhtmlajax