DataTables / Bootstrap Modals not working on Firefox (Symfony 4 Project)

DataTable modal not working on Firefox

This project has several bootstrap modals which are working fine on Chrome but not on Firefox.
I’ve managed to find a solution which does make them work, but can’t use it because it causes the DataTable search bar to disappear.
Here’s an example of a page it happens.

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

The solution which worked was essentially rescaling the browser on Firefox using jquery, this fixed a layout inconsistency which made the modal work. However I am losing the DataTable searchbar due to jQuery conflicts. Using multiple jqueries with $.noConflict(true) didn’t solve the issue (the resizing isn’t applied).

Here’s an example:

  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 + ')');
                }
            }
            );

I do enter the loop but jQuery doesn’t apply the transformation for Firefox, hence the modal still doesn’t work.

I’m trying to achieve the modals of ‘Action’ table head to work on Firefox, without causing any regression. Thank you for any help

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *