Модал DataTable не работает на Firefox
В этом проекте есть несколько модалов bootstrap, которые отлично работают на Chrome, но не на Firefox. Мне удалось найти решение, которое заставляет их работать, но я не могу его использовать, потому что оно приводит к исчезновению панели поиска DataTable. Вот пример страницы, на которой это происходит.
Twig
{% extends 'home/base.html.twig' %}
{% block title %}Document index{% endblock %}
{% block content %}
<div id="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb breadcrumb-custom">
<li class="breadcrumb-item breadcrumb-item-custom">
<a href="#">{{ traduction.accueil|trans }}</a>
</li>
<li class="breadcrumb-item breadcrumb-item-custom">
{{ traduction.administration|trans }}
</li>
<li class="breadcrumb-item active">{{ traduction.documents|trans }}</li>
<!-- <li class="breadcrumb-item active">Overview</li> -->
</ol>
<h3>{{ traduction.gestion_des_documents|trans }}</h3>
<table class="table table-sm mt-5" id="dataTabledoc">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">{{ traduction.nom|trans }}</th>
<th scope="col">{{ traduction.dossiers|trans }}</th>
<th scope="col">{{ traduction.systeme_de_droit|trans }}</th>
<th scope="col">{{ traduction.cree_le|trans }}</th>
<th scope="col">{{ traduction.derniere_modification_le|trans }}</th>
<th scope="col">{{ traduction.actions|trans }}</th>
</tr>
</thead>
</table>
<a href="{{ app.request.getBaseURL() }}/newDossierDocument" class="btn btn-custom-hceres float-right mt-5 mr-1"><i class="fas fa-fw fa-plus"></i>{{ traduction.ajouter|trans }}</a>
<footer class="sticky-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>---</span>
</div>
</div>
</footer>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script>
$(document).ready(function() {
var lang = "{{ app.session.get('lang') }}";
if ( lang === "fr") {
$('#dataTabledoc').DataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.16/i18n/French.json"
},
"processing": true,
"responsive": true,
"ajax": "{{ path("all_document") }}",
"columns": [
{ "data": "id" },
{ "data": "nom" },
{ "data": "dossier" },
{ "data": "systemedroit" },
{ "data": "datecreation" },
{ "data": "datemodification" },
{ "data": "action" , "searchable": false},
],
"initComplete": function () {
$(this).show();
}
});
}
if ( lang === "en") {
$('#dataTabledoc').DataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.16/i18n/English.json"
},
"processing": true,
"responsive": true,
"ajax": "{{ path("all_document") }}",
"columns": [
{ "data": "id" },
{ "data": "nom" },
{ "data": "dossier" },
{ "data": "systemedroit" },
{ "data": "datecreation" },
{ "data": "datemodification" },
{ "data": "action" , "searchable": false},
],
"initComplete": function () {
$(this).show();
}
});
}
});
</script>
{% endblock %}
Решением, которое работало, было по существу изменение масштаба браузера на Firefox с использованием jquery, это исправлено несоответствие макета, из-за которого работала модальная модель. Однако я теряю панель поиска DataTable из-за конфликтов jQuery. Использование нескольких jqueries с $ .noConflict (true) не решило проблему (изменение размера не применяется).
Вот пример:
let jScaler = $.noConflict(true);
let browser = navigator.userAgent.toLowerCase();
let currFFZoom = 1;
jScaler(document).ready(function () {
if (browser.indexOf('firefox') > -1) {
//console.log("in loop", jScaler.fn.jquery);
let step = 0.02;
currFFZoom += step;
jScaler('body').css('MozTransform', 'scale(' + currFFZoom + ')');
}
}
);
Я ввожу l oop, но jQuery не применяет преобразование для Firefox, следовательно, модальный режим по-прежнему не работает.
Я пытаюсь достичь модальности заголовка таблицы 'Action' для работы Firefox, не вызывая регрессии. Спасибо за любую помощь