In Firefox browser, when opened in normal form all data moves towards right, while it appears correctly in Chrome and Edge. Also when I tried to minimize the resolution in edge or chrome all data moves towards right.
When opened in Firefox Normally:
When Resolution is changed:
My CSS and other data:
<style>
/* Ensure consistent box-sizing across all elements */
* {
box-sizing: border-box;
}
/* Adjust the layout of the DataTables top and bottom sections */
.dataTables_wrapper .top,
.dataTables_wrapper .bottom {
width: 100%;
}
/* Add custom styles for the container */
.container {
/* display: flex;
justify-content: space-between; */
display: flex;
justify-content: space-between;
align-items: center; /* Center vertically */
}
.table-container {
margin-top: 20px;
width: 100%; /* Ensure the container spans the full width */
overflow-x: auto; /* Enable horizontal scrolling if necessary */
}
.table-container table {
width: 100%; /* Ensure the table spans the full width of its container */
border-collapse: collapse;
}
.table-container th,
.table-container td {
padding: 5px;
text-align: left;
border-bottom: 1px solid #ddd;
/*white-space: nowrap; /* Prevents text from wrapping */
}
.table-container th {
background-color: #f2f2f2;
font-weight: bold;
/*white-space: nowrap; /* Prevents text from wrapping */
}
.table-container tr:nth-child(even) {
background-color: #f2f2f2;
}
.table-container tr:hover {
background-color: #ddd;
}
#chart-container {
border: 2px solid #ddd; /* Border width, style, and color */
padding: 10px; /* Add some padding inside the container */
border-radius: 15px; /* Make the edges rounded (adjust the value as needed) */
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-left: 0px;
}
canvas {
width: 250px !important;
height: 100px !important;
}
/* Style for the filter container */
.filter-container {
display: flex;
justify-content: space-between;
align-items: center; /* Center vertically */
}
/* Style for the filter div */
.filter {
display: flex;
align-items: center; /* Center vertically */
}
.table-container th:first-child,
.table-container td:first-child {
width: 50px; /* Adjust based on your checkbox width */
text-align: center;
}
.table-container td.wave-number {
text-align: center !important; /* Center align wave number cells */
}
</style>
My filter and table contents:
<div class="filter-container">
<div id="chart-container">
<h5 style="font-weight: bold;">Overall Counts</h5>
<!--<canvas id="statusChart"></canvas>-->
<!-- Add this div to display the counts -->
<div id="statusCountsContainer">
<div class="status-item">
<span class="circle yellow"></span> Not Started: <span id="notStartedCount">0</span>
</div>
<div class="status-item">
<span class="circle blue"></span> In Progress: <span id="inProgressCount">0</span>
</div>
<div class="status-item">
<span class="circle green"></span> Completed: <span id="completedCount">0</span>
</div>
<!--<div class="status-item">
<span class="circle greenyellow"></span> Completed Manually: <span id="completedManuallyCount">0</span>
</div>-->
<div class="status-item">
<span class="circle red"></span> Failed: <span id="failedCount">0</span>
</div>
<!-- Search Field -->
</div>
</div>
</div>
<div class="table-container">
<table class="table" id="deviceTable">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>Device Serial</th>
</tr>
</thead>
<tbody id="deviceTableBody">
@foreach (var item in Model)
{
<tr>
<td><input type="checkbox" class="row-checkbox" data-id="@item.DeviceSerial"></td>
<td>@item.DeviceSerial</td>
</tbody>
</table>
</div>
In javaScript I have made applyResponsiveStyles() to handle it but not working also provided specific style for firefox but not working( navigator.userAgent.indexOf(‘Firefox’) )
My JavaScript Code:
@section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var table; // Declare the table variable globally
$(document).ready(function () {
// Initialize DataTable
table = $('#deviceTable').DataTable({
searching: true,
lengthChange: false,
dom: '<"top"lf<"clear">>rt<"bottom"ip<"clear">>',
order: [[7, 'desc']],
paging: true, // Enable pagination
columnDefs: [
{ orderable: false, targets: 0 } // Disable sorting on the first column
]
});
updateStatusCounts();
populateWaveFilter();
// Apply styles on page load
applyResponsiveStyles();
// Add event listener for window resize
$(window).on('resize', applyResponsiveStyles);
// Inject Firefox-specific styles
if (navigator.userAgent.indexOf('Firefox') !== -1) {
$('<style>').text(`
/* Firefox specific adjustments */
.table-container table {
table-layout: auto; /* Adjust table layout for Firefox */
}
`).appendTo('head');
}
}
// Function to apply responsive styles
function applyResponsiveStyles() {
var windowWidth = $(window).width();
if (windowWidth <= 768) {
// Apply responsive styles
$('#chart-container').css({
'flex-direction': 'column',
'gap': '10px'
});
$('.filter-container').css({
'flex-direction': 'column',
'gap': '10px'
});
$('.search-container').css({
'margin-left': '0',
'padding-top': '5px'
});
// Adjust table styles
$('.table-container').css({
'overflow-x': 'auto',
'margin-top': '20px'
});
$('#deviceTable').css({
'width': '100%'
});
$('.table-container td').css({
'padding': '5px',
'text-align': 'left',
'border-bottom': '1px solid #ddd'
});
$('.table-container th').css({
'background-color': '#f2f2f2',
'font-weight': 'bold'
});
} else {
// Revert to default styles
$('#chart-container').css({
'flex-direction': '',
'gap': ''
});
$('.filter-container').css({
'flex-direction': '',
'gap': ''
});
$('.search-container').css({
'margin-left': '',
'padding-top': ''
});
// Reset table styles
$('.table-container').css({
'overflow-x': '',
'margin-top': ''
});
$('#deviceTable').css({
'width': ''
});
$('.table-container td').css({
'padding': '',
'text-align': '',
'border-bottom': ''
});
$('.table-container th').css({
'background-color': '',
'font-weight': ''
});
}
}
}
Any help will be thankful, and let me know if any changes are required in above query