trouble with affix functionality in html when using bootstrap 4

I have successfully implemented code that fixes the header of a table when scrolling down the page. This was achieved using the "affix" feature in Bootstrap version 3.3.7.

However, I've now noticed that the latest version of Bootstrap is 4.0.0 and my attempts to migrate the code to work with this version have been unsuccessful.

After some research on Google, I discovered that the "affix" feature is not supported in the newer versions of Bootstrap. Despite trying a few solutions, I'm unable to fix the table header currently.

If anyone could provide assistance or guidance, it would be greatly appreciated.

Please find below the code:

<!DOCTYPE html>
<html lang="en>
... (omitted for brevity) ...

Kind regards

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

To implement sticky positioning, utilize position: sticky; in accordance with the suggestions provided in the Bootstrap 4 Migration Guidance. It's important to include one of the following properties - top, bottom, right, or left - on the element to prevent it from being rendered as if it had a position: relative;.

    th,td {
        width:6.67%;  /*100% number of Cloumn*/
    }

  .lin
    {

    color:windowtext;
    font-size:8.0pt;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    text-align:left;
    vertical-align:bottom;
    /*width:20px;*/
    }

  .sol
    {

    color:windowtext;
    font-size:8.0pt;
    font-style:normal;
    text-decoration:none;
    font-family:Arial, sans-serif;
    text-align:left;
    vertical-align:bottom;
    /*width:20px;*/
    }

.fixed-header th {
    position: sticky;
    top: 0;
    background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>sssssssssdhhdhdhd dddddd for Hello sssssssdd</h2>

  <table class="table table-striped">

    <thead class="fixed-header">

      <tr>      
      <th>Current Rel<br/>
        Arssstecture<br/>
        fitrtyr<br/>
        of OS
        </th>

        <th>aupporz <br/>
            asdins</th>

        <th>aussorz <br/>
            znds</th>

        <th><br/>
        a34<br/>
        (IAas)<br/>
        31
        </th>

        <th>Pinux<br/>
        a86_64<br/>
        63
        </th>

        <th><br/>
        <br/>
        xCC
        </th>

         <th><br/>
        <br/>
        abc 
        </th>

        <th><br/>
        sd51<br/>
        (sdanium)<br/>
        64
        </th>

        <th>
        sdhetr<br/><br/>
        32
        </th>

        <th>
        sdhetr<br/><br/>
        64
        </th>

        <th>
        pun/aassssu<br/>
        aaaaa<br/>
        64<br/>
        </th>

        <th>
        pun<br/>
        a86_64<br/>
        14<br/>
        </th>

        <th>
        cIX<br/>
        weakiPC<br/>
        63<br/>
        </th>

        <th>
        aP<br/>
        aA <br/>
        aISC<br/>
        34<br/>
        </th>

        <th>
        pandows<br/>
        a16<br/>
        31<br/>
        </th>
      </tr>
    </thead>

    <tbody style="font-size:11px">
    [Data rows here]
    </tbody>
    </table>
</div>

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

Is it possible to run a web game on the same URL?

While working on quickly prototyping my ideas, I have been utilizing Express with Mongo and have successfully implemented a mongostore cookie storage system. Here's what I'm wondering: Can I keep everything happening on one page, specifically &a ...

javascriptnode.jsexpressurl-routing

Convert the numerical values from an array into an input field format

Currently, I have two inputs and an array with two number positions. The v-model in each input corresponds to a value in the array. Whenever a change is made in either input field, it reflects on the corresponding position in the array, which works perfect ...

javascriptvue.jsvuejs3vue-composition-api

Tips for arranging my list within my list-group-items to create a visually appealing layout

I've encountered an issue where the alignment of list-group-items inside a card container is not correct. I am using Bootstrap 4 and my aim is to neatly align all 3 fields in a tabbed column layout. Any suggestions on how to achieve this are welcome. ...

javascripthtmlcssbootstrap-4django-bootstrap4

Creating a responsive button inside a table can be achieved effortlessly with Angular Material table components

Help needed to ensure button responsiveness within a table. Here's how it appears on desktop and mobile screens: Desktop View https://i.sstatic.net/GxHUe.png Mobile View https://i.sstatic.net/oOAgk.png The delete button is somewhat obscured in t ...

csstwitter-bootstrap-3angular-material

What is the best approach for managing multiple HTTP requests in my specific situation?

I have a query about handling multiple HTTP requests in my code to ultimately get the desired result. Here is an outline of my approach: var customer[]; var url = '/api/project/getCustomer'; getProject(url) .then(function(data){ ...

javascriptangularjs

There seems to be a hitch in the functioning of the JavaScript codes

I'm having trouble calculating the amount using jQuery. Could someone please review my code and let me know what's wrong? Here are my Javascript and jQuery codes: After making changes: $(document).ready(function() { $('.home_banner&ap ...

javascriptjqueryhtml

Enhance the Error class in Typescript

I have been attempting to create a custom error using my "CustomError" class to be displayed in the console instead of the generic "Error", without any success: class CustomError extends Error { constructor(message: string) { super(`Lorem "${me ...

javascripttypescript

Can you please provide the appropriate PropTypes for a dictionary in a ReactJS project?

Looking for something along the lines of y = {"key0": [value0, value1], "key1":[value2]} What is the proper way to define the proptypes for y? ...

javascriptreactjs

What is the best way to utilize card-group in conjunction with ngFor?

Here is the essential syntax for a card-group layout: <div class="card-group"> <div class="card"> <img class="card-img-top" [src]="getImage(1)" alt="Card image cap"> <di ...

angularbootstrap-4card

Enhance your figures with a unique Javascript magnifying tool that works seamlessly across all browsers

After searching the web for magnifying glasses, I found that most only work for one picture. So, I took matters into my own hands and created a magnifying glass that can magnify all pictures within a specific div. It functions perfectly on Chrome browser b ...

javascriptjquerycss

When using Reactjs with leaflet-routing-machine, the waypoint is rendered twice

While attempting to use the leaflet-routing-machine library, I encountered a bug. The issue is that the "Waypoints" section is rendering twice. Why is this happening? Can anyone offer assistance? Thank you https://i.sstatic.net/MlkQ2.jpg My code is lis ...

javascriptreactjsreact-leafletleaflet-routing-machine

Issue with Achieving Two-Way Binding in Angular 1.5 Component when using $ctrl

I am struggling with customizing some products using a component in my index.html. Ultimately, I need to calculate the total of selected products within the main controller "planosVoz" using two-way binding on the svaTotal property in the component control ...

javascriptangularjsangularjs-directiveangularjs-components

Combining multiple arrays of arrays in JavaScript

I am dealing with an array that contains nested arrays. This particular array is called template https://i.sstatic.net/QIs0Q.png template consists of 2 arrays, but the number can vary and there can be multiple levels of arrays within each one. Here' ...

javascriptreactjs

The button's status changes to disabled until I click outside the input field in Angular

I am currently facing an issue with a form (heat index calculator) that requires 2 inputs - a dropdown and a button. The button is disabled when there are no inputs or if the inputs are invalid. Everything works correctly, except for the fact that even whe ...

javascriptangulartypescript

What was the functionality of visibilitychange implemented for?

Here is my query: window.addEventListener("visibilitychange", function(e) { console.log(window.uidd) window.uidd = window.uidd || (new Date).getTime() + Math.random() console.log(window.uidd) }) However, if you open the console for the first time ...

javascripttypescript

What causes useEffect to be render-blocking (paint-blocking) in the tooltip demonstration?

Following the tooltip example for the useLayoutEffect hook from the updated react docs, I have concluded the sequence of events as follows: react render() --> reconciliation --> update DOM if virtual dom is changed --> DOM update finishes --> ...

javascriptreactjsreact-hooksbrowser

Choosing various choices using AngularJS

My goal seems simple using vanilla JS, but with AngularJS, I'm looking for the best way to achieve it within the framework. I aim to update the selected options in a multiple select box without adding or removing any options. Below is a snippet of my ...

javascriptmodel-view-controllerangularjs

An approach to transferring the ID of a multiple dropdown within the $.each function

function filterFields(classname, value, chkClass) { var checkedfields = []; $.each($("."+classname+" option:selected"), function(){ checkedfields.push($(this).val()); }); $('#'+chkClass+'Filters').val(ch ...

javascriptjqueryajaxcodeigniter

I'm having trouble understanding how to utilize startAt and endAt in Firebase version 9

Trying to implement geo querying in my firestore db with the new version of firebase has been challenging. The code examples provided in the documentation reference an older version, making it difficult for me to understand how to use ".startAt" and ".endA ...

javascriptfirebasegoogle-cloud-firestore

Issues with the File function in Cordova/Phonegap impacting functionality

I am eagerly anticipating the day when the file function in Cordova finally starts working for me! This particular section of code functions perfectly on Chrome (hooray!), but unfortunately not within the Android app: function errorHandler(e) { var msg ...

javascriptandroidcordova