Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows:

<div class="panel panel-default table-responsive fixedHeader">
  <!-- Table -->
  <table class="table table-striped">
    <thead>
    <tr>
      <!--table headers are here-->
    </tr>
  </thead>
  <tbody>
    {% for row in hoursDb %}
      <tr>
        <!-- all rows are called here, just saving space -->
        <td>
          <form action="" method="post">
            <button type="submit" class="btn btn-default" name="delete" value="{{ row[7] }}">
              <span class="glyphicon glyphicon-remove"></span>
            </button>
          </form>
        </td>
      </tr>
    {% endfor %}
  </tbody>
  </table>
</div>

To achieve a fixed header in the table, I used the following CSS styling:

.fixedHeader {
    height:40vh;
    overflow-y:auto;
}

.fixedHeader th {
  position: sticky;
  top: 0;
}

table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

However, when scrolling through the table, the header covers the other row data but does not cover the form/button/glyphicon for the delete action. This allows the user to accidentally click on the delete button. How can I ensure that the table header covers the form/button/glyphicon as well?

Thank you in advance for any suggestions or solutions.

Answer №1

Have you experimented with utilizing the Z-index property? Feel free to provide a snapshot for better clarity.

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

"Enhancing user experience with jQuery hover effects on table

This is an example of the HTML structure: <tr class="row-1 row-first"> <td class="col-1 col-first"> <div class="views-field views-field-field-logo-image"></div> <div class="views-field views-field-field-logo-title"> ...

Is the navbar-nav being unexpectedly placed below the navbar-brand?

As my screen width decreases to 767px, the navigation collapses as expected. However, at 768px, the navbar-nav drops below the navbar-brand until reaching 795px where they realign again. These values may vary based on the size of your navigation. Check o ...

Shuffle letters in a word when hovered over, then unscramble them back to their original order

I have noticed a fascinating effect on several websites. To give you an idea, here are two websites that showcase this effect: Locomotive and TUX. Locomotive is particularly interesting to look at as the desired effect can be seen immediately when hovering ...

Adding the header.php file in WordPress caused the style.css to stop working

Whenever I include a basic "header.php" file in my theme directory, my style.css mysteriously stops working. But when I remove the "header.php" file, everything goes back to normal. How can I troubleshoot this issue? Below is the code snippet from my fil ...

What obstacles must be overcome when developing a CSS framework?

Currently, I am delving into the realm of popular CSS frameworks such as Bootstrap and Foundation. While studying them, I have identified aspects that I believe could be enhanced and customized to suit my own projects or potentially for free distribution i ...

Creating personalized columns in a BootstrapVue table

I'm having an issue with the b-table component in bootstrap-vue. The array containing my items is structured like this: [{ id: 1, name: "Test", phone: 555-111-666, address: "Some Address", //etc... }] I have a couple of question ...

Adjust the vertical alignment in Material UI Grid to allow for proper tab navigation while maintaining the original order

When using Material-UI's standard grid system, the alignment of a new grid item after all 12 "space units" are utilized is based on the longest element within those 12 "space units". Is there a way to disrupt this type of alignment? If you take a look ...

A PHP mishap causing unexpected errors

My login page confirmation code is giving me an error when trying to log in: Warning: mysql_fetch_row() expects parameter 1 to be resource, boolean given in /home/u133082736/public_html/login.php on line 14 This is the snippet of my code that's ca ...

The jQuery event listener for clicking on elements with the class "dropdown-menu li a" is not functioning properly

I've been attempting to implement a dropdown menu using Bootstrap that displays the selected option when a user clicks on it. However, I'm encountering issues as the breakpoints set within $(document).on("click", ".dropdown-menu li ...

Identify changes in attributes on elements that are updated automatically

On my webpage, I want to have two select boxes that are connected so their values always match. Here's an example: Imagine a page with two selects: <select class="myselector"> <option value='1'>1 <br> < ...

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

I'm attempting to determine the number of columns in a specific table, but some are disabled - I'd like to know if it's possible to get the count without including the disabled ones (only counting the visible columns). As you can see in the ...

When submitting a form in HTML, ensure that the input checkbox returns 'On' instead of 'True'

My MVC3 app is using Project Awesome from http://awesome.codeplex.com/, but I'm encountering a strange issue with checkboxes. Inside a Modal popup, I have the following simple Html code: <input type="checkbox" class="check-box" name="IsDeleted"> ...

Using node appendChild() in HTML for animating elements

As someone who is brand new to the world of web development, I am trying my hand at creating a webpage that expands as a button is clicked. Recently, I stumbled upon this helpful link which includes some code: The HTML code snippet is: <ul id="myList" ...

Ways to integrate html and php together

I'm currently working on integrating PHP with an HTML form. Here is a snippet of my code: <? php $path = "books /"; $books = opendir ($path); while (($book = readdir ($books))! == false) { if (substr ($book, -4) === ".txt") ...

Tips for automatically adjusting the height of the footer

Is there a way to dynamically adjust the height of the footer based on the content length inside the body? I've been exploring solutions like setting the position of the footer as "fixed," but it seems to stay at the bottom of the screen, which is no ...

Tips on organizing elements

Here are three elements: <!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.boo ...

Issue with FlexSlider 2 and thumbnail slider: Previous and Next buttons not functioning for main image

I have encountered an issue while using FlexSlider 2 with the thumbnail slider. The problem is that the main image does not respond as expected. When I try to navigate using the next/prev buttons, it does not slide or fade to the next/prev image. Even cl ...

jQuery Mobile for Enhanced Customer Relationship Management on the Web

I have recently been tasked with creating a Web Based CRM Software and I plan to use PHP and MYSQL as my backend. For the frontend, I am considering using a UI framework such as jQuery Mobile. I like that it is fully AJAX-driven, easy to code with, and has ...

Utilizing CURL for PHP to extract information from any webpage

Can a PHP function be created to generate an HTML string of any link like a browser does? For example, links such as "", "", "mywebsite.com", "somesite.com/.page/nn/?s=b#85452", "lichess.org" What I have attempted: $curl = curl_init(); curl_setopt($curl, ...

Displaying a message text upon successful AJAX request

I have a web page with an AJAX request that updates data in the database. After the update, I want to display a message to the user on the webpage confirming that the data has been successfully updated. However, currently, no message is being displayed and ...