DataTables / Bootstrap Modals 在 Firefox 上不起作用（Symfony 4 项目）

Question

DataTable 模式在 Firefox 上不起作用

这个项目有几个引导模式，它们在 Chrome 上运行良好，但在 Firefox 上却不行。 我设法找到了一个可以让它们工作的解决方案，但不能使用它，因为它会导致 DataTable 搜索栏消失。 这是它发生的页面示例。

树枝

{% 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 %}

有效的解决方案本质上是使用 jquery 在 Firefox 上重新缩放浏览器，这修复了使模式工作的布局不一致。但是，由于 jQuery 冲突，我丢失了 DataTable 搜索栏。将多个 jquery 与 $.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 + ')');
                }
            }
            );

我确实进入了循环，但 jQuery 没有为 Firefox 应用转换，因此模态仍然不起作用。

我正在尝试实现“Action”表头的模态以在 Firefox 上工作，而不会导致任何回归。感谢您的帮助

Answer 1

更新：这是其中一种让您感到非常愚蠢的解决方案。 它所需要的只是数据表上的 "style="width: 100%;"。

在这里找到想法：https://datatables.net/forums/discussion/8931/columns-are-not-resized-when-changing-browser-window-dimensions

所以基本上这解决了布局问题和模态不工作..