When using the DataTables example here, I noticed that when scrolling the table to the left, the fixed cell becomes transparent on dark rows.
Could this issue be related to Bootstrap 4 or DataTables? If so, is there a workaround available to fix it?
When using the DataTables example here, I noticed that when scrolling the table to the left, the fixed cell becomes transparent on dark rows.
Could this issue be related to Bootstrap 4 or DataTables? If so, is there a workaround available to fix it?
It appears there may be a bug that needs to be reported to Bootstrap. However, in the meantime, here is a CSS workaround that I have created:
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true
} );
} );tr[role=row] {
background:white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
...Per DataTables, there seems to be a
glitch in the integration of DataTables with Bootstrap 4.To work around this issue, you can insert the following code into your personalized CSS
table.dataTable.table-striped.DTFC_Cloned tbody tr:nth-of-type(odd) {
background: #F3F3F3;
}
table.dataTable.table-striped.DTFC_Cloned tbody tr:nth-of-type(even) {
background: white;
}
None of the previous solutions were effective for me After experimenting with different approaches, I found the following solution to work perfectly!
.DTFC_LeftBodyLiner{
background : white !important;
overflow : hidden !important;
}
I've been attempting to verify if the value of an input field is part of an array, but for some reason it's not working. Here is my approach: var postcode1 = []; for (var i = 21000; i < 21999; i++) { postcode1.push({ val: i, text ...
I need help with capturing and storing the values of multiple text-area boxes into a database upon clicking the submit button. These text-areas are dynamically generated when the add button is clicked. My tech stack involves Node.js, Express, and MongoDB. ...
On my webpage, I have an ASP:Grid with a small copy button in each row to copy the text inside that cell. The javascript function I created for copying the text is as follows: var copyText = function (textToCopy) { $(".copy").append("<textarea id=&ap ...
Having some webfont service issues with jscrollpane. It seems like the height of jscrollpane is being calculated based on the default font size before switching to the webfont, causing the div to be slightly longer and cutting off text. I tried using auto ...
Is there a way to abbreviate class names in HTML and CSS files? For example, I currently have the class name: .profile-author-name-upper And I would like to change it to something shorter like: .p-a-n-u or .panu Any suggestions on how to achieve thi ...
I'm still learning Ajax and JQuery, and I've been having a tough time putting this together. My goal is to use ajax navigation to load URLs and implement back and front navigations with popstate. The code below is functional, but I'm facing ...
I have been trying to create a masked input field for entering IP addresses, but every solution I come across seems to have some flaws. The best solution I found so far is , but it still allows values higher than 255 to be entered. It works fine initially ...
I'm attempting to pass a function when changing pages in jQuery Mobile, but I keep getting an error that points to `$.ajax` $( ":mobile-pagecontainer" ).pagecontainer( "change", "#schoolperformance", { reload : true, showLoadMsg : false, ...
I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...
Can anyone provide guidance on how to ensure that the order success page in Magento is displayed as https:// instead of just wwww? I have SSL configured on my website and it's imperative that the order confirmation page is loaded using https:// for G ...
Curious if anyone has had success with this yet, I have integrated into my ng-9 and bootstrap4.4 project. It functions effectively, but lacks a sliding animation or effect. Struggling to locate a functional example elsewhere. Appreciate your time in re ...
Is there a way to deactivate PrettyPhoto once it has been activated? $(document).ready(function () { $("a[rel^='prettyPhoto']").prettyPhoto(); } $("#disablePrettyphoto").click(function (e) { $("a[rel^='prettyPhoto']").KILLPRET ...
I am in the process of developing a college website and I am curious about the difficulty level involved in creating an expanding tab on the side of the webpage. The idea is that when users hover over the tab with their mouse, it would expand to reveal add ...
Upon loading my website, users are directed to a file named index.jsp. My goal is to send a get request to one of my servlets when this page loads. The initial URL is: localhost:8080/Test/ The servlet should perform an action when the URL changes to: loc ...
Is there a way to retrieve the device ID using Jquery or pure JavaScript, without relying on Cordova for my project? I have come across solutions that involve Cordova, but I prefer not to use it. Are there any alternatives available? Edit: By unique ID, ...
I'm facing a challenge with a paragraph element that is dynamically filled with content using Javascript. I need to hide the element whenever it doesn't have any text within it. However, I want to avoid using setTimeout or setInterval for this ta ...
Hello, I am currently working on a project where I have a span that displays over an image on hover. I would like to add a bit of javascript or css transitions to make this div fade in to about 0.8 opacity when hovered over, and then fade back to 0 opacity ...
I recently used a service to extract and retrieve the contents of a zip file. I am trying to read the content of the files and integrate them into the scope of my Angular project. Any suggestions would be greatly appreciated. Below is an outline of my func ...
Struggling to make this contact form function properly, I've tried to follow the example provided at . Unfortunately, all my efforts lead to a fatal error: "Call to undefined function http_response_code() in /hermes/bosoraweb183/b1669/ipg.tenkakletcom ...
I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using ...