The sticky table header is being covered by a disabled HTML button, while the active buttons are not visible

I'm currently working on a website using Bootstrap 5 as my framework. The issue I'm facing is that when scrolling down the page and keeping the table header stuck to the top, the disabled button ends up showing over the header.

I attempted to use both the disabled property and a class name (specifically for Bootstrap).

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3edf3ef">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
            <table class="table table-striped align-middle mx-auto">
                <thead>
                    <tr style="position: sticky; top: 0; background-color: white;">
                        <th scope="col" style="position: sticky; top: 0; background-color: white;">Date</th>
                        <th scope="col" style="position: sticky; top: 0; background-color: white;">Agenda</th>
                        <th scope="col" style="position: sticky; top: 0; background-color: white;">Meeting Minutes</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">March 19th<br><small class="text-muted"> Budget Meeting Workshop <u>6:00pm</u></small></th>
                        <td><button type="button" class="btn btn-primary disabled" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwagnd.pdf')">View</button></td>
                        <td><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="setSrc('brdmtgs/2019b/marbwmtg/marbwmin.pdf')">View</button></td>
                    </tr>

                    <!-- Additional table rows here -->

                </tbody>
            </table>
        


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header" id="afterme">
        <h5 class="modal-title" id="exampleModalLabel">Meeting Information</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="download_file()">Download</button>
      </div>
    </div>
  </div>
</div>
htmlcssbootstrap-5

Answer №1

To avoid experiencing this issue with any other element besides the button, another approach is to ensure that the top header bar always remains on top of the table.

Instead of lowering the disabled button by one level, raise the top bar by one level:

.table > thead {
  z-index: 1;
  position: relative;
}

(You can also assign a class to your <thead> Element and directly target the element, whichever method is more convenient for you.

Answer №2

Include the following code snippet in your css:

.btn-primary:disabled {
    position: relative;
    z-index: -1;
}

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

Changing the text of a link when hovering - with a transition

Seeking a straightforward way to change text on a link upon :Hover. I desire a gentle transition (text emerges from below) and fallback to default if JavaScript is disabled. HTML <div class="bot-text"> <a href="">Visit this site</a> ...

javascriptjqueryhtmlcss

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

Having trouble making the menu stay at the top of the page in IE7

Check out the demo here: http://jsfiddle.net/auMd5/ I'm looking to have the blue menu bar stay fixed to the top of the page as you scroll past it, and then return to its original position when scrolling back up. This functionality works in all brows ...

javascriptjquerycssinternet-explorerinternet-explorer-7

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

javascripthtmlcssangularjs

What is the easiest way to display index.html using Django?

Hi there, After setting up Django 1.9 on my Ubuntu machine, I am looking to deploy a lightweight Django app. Here is what I have done so far: cd ~ django-admin startproject dj10 cd ~/dj10/dj10/ mkdir templates echo hello > templates/index.html My qu ...

pythonhtmldjango

Uploading files with Angular and NodeJS

I am attempting to achieve the following: When a client submits a form, they include their CV AngularJS sends all the form data (including CV) to the Node server Node then saves the CV on the server However, I am encountering difficulties with this proc ...

javascripthtmlangularjsnode.jsfile-upload

Missing Image: Bootstrap NavBar Display Issue

Having trouble inserting an image into my Bootstrap navbar, only the alt text is showing up. Does anyone have a solution for this? Bootstrap Version: CDN Version 5.0 Beta Screenshots: https://i.sstatic.net/vBNYp.png https://i.sstatic.net/v8lwu.png https: ...

htmlcssbootstrap-5

A guide on how to perfectly center a <ul> element on a webpage

After creating a ul element, I have customized the html and css for my navigation bar: Html: <ul id="list-nav"> <li><a href="Marsrutas.html">Item1</a> </li> <li><a href="Nuotraukos.html">Item2</a& ...

jqueryhtmlcsshtml-listsnavbar

Learn the process of setting a timestamp using this PHP script

I have a script that retrieves data based on selected dates, but I want to modify it to work with timestamps instead. <link rel="stylesheet" type="text/css" href="tcal.css" /> <script type="text/javascript" src="tcal.js"></script> <fo ...

phphtmldatetimestamp

I'm having trouble displaying the Facebook page plugin on my HTML website

I encountered a minor issue. I attempted to add the "Facebook page plugin" on a test website. I copied the code from the official Facebook plugin page: <!-- 1. Include the JavaScript SDK on your page once, ideally right after the opening <body> t ...

htmlfacebookplugins

What is the method for including footer content on a site that only has a masthead?

Is there a way to incorporate footer-type text with copyright disclaimer into a masthead-only website? I keep trying to add a footer, but it ends up getting stacked outside the masthead, causing the screen to become scrollable. My goal is to include the co ...

htmlcsstwitter-bootstrapresponsive-designfooter

"Enhancing User Interaction: The Dynamic Trio of Ajax, Php, and MySql in Comment

I have successfully developed a basic commenting system, featuring a form with two fields: name and comment. Upon submitting the values, it utilizes Ajax to dynamically add the comment to the existing page without refreshing the entire content. My next ob ...

phpmysqlhtmlajaxcomments

Position the final list item in the column on the left side

Currently, I am facing an issue with creating spacing between li elements in a column layout. The problem arises when the last li in the column does not align to the far left edge of the column width. Take a look at the screenshot below for reference: Bel ...

csshtmlwordpress-theminghtml-lists

CSS designs that adapt with the screen: Triangles in

I'm currently working on creating a responsive triangle using CSS. I want both the height and width of the triangle to adjust as the window size changes. Below is my static code: #triangle { z-index: 2; width: 0; height: 0; position:absolute ...

htmlcss

Navigate to a specified div using JavaScript

I'm having an issue with my navigation bar not scrolling to the designated div. Despite looking at other examples, I can't seem to find a solution <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> ...

javascriptjqueryhtmlcss

The margins within the div of the new tab are not applying as expected

Greetings! Currently, I am in the process of generating a dynamic form within a new tab using JavaScript. For some reason, the margin effects on the div element are not being applied correctly. Despite my attempts to set the margins using both classes and ...

javascripthtmlcss

How can I prevent a child div from activating the hover effect on its parent div?

I am currently exploring how to create a child element with position: absolute that is placed outside of its parent element without triggering the parent's :hover effect. Despite the parent having a hover effect, the child elements will still activat ...

htmlcssinheritancehover

IE encountered an invalid character

While working on a JavaScript function, I encountered an issue with a string variable. Specifically, when running the page in IE with this script, I receive an error message indicating an invalid character at the following line: let displayString = `${s ...

javascripthtmlinternet-explorer

What steps can be taken to turn off specific warning rules for CSS mode in ACE editor?

Utilizing the Ace Editor (through Brace and React-Ace) is a key aspect of my project. In our implementation, we specify the editor's mode as "css" and integrate it into our webpage. While this setup functions correctly, we have observed that some of ...

javascriptcssace-editorreact-ace

Is there a way I can replicate this expandable div?

I have successfully implemented a script that expands and collapses. However, I am facing an issue when trying to use two of these scripts on the same page. I attempted to simply add "_two" to all instances of "accordion," but it doesn't seem to be f ...

javascriptjqueryhtmlcss