Bootstrap 4 display problem IE Edge vs. Mozilla

dg_datatables

I'm using Datatables 1.10.18 with Bootstrap 4. I developed everything on Mozilla's Firefox and everything works fine. But my client uses Firefox and IE Edge. I'm using the Button-Collection (for exporting) and the search field in the same row:

dom: "<'row'<'col-md-12'l>>" +
         "<'row'<'col-md-6'B><'col-md-6'f>>" +
         "<'row'<'col-md-12'tr>>" +
         "<'row'<'col-md-6'i><'col-md-6'p>>",

         .....

buttons: [
         { extend   : 'collection',
            text     : 'Export',
            className: 'btn bg-secondary',
            autoClose: true,
            buttons: [
                        'copy',
                        'excel',
                        'csv',
                        'pdf',
                        'print'
            ]
         }
]

In Firefox it works absolutly fine. Button on the left side of the row and the search field of right side of the same row. In IE Edge both parts a displayed on the left side and overlap each other. What i'm doing wrong?

Unfortunately i can not show the website because it runs in the corporate intranet and has no internet access.

Any hints or help?

Greetings
Christian

dg_datatables

Addendum:
Chrome works also fine. Only Problems with IE Edge and MS Explorer. It seems to be a problem with Microsoft. I would guess something in the CSS.

colin

Hi @dg_datatables ,

I just tried it here, and it seems to work as expected in both IE and Edge. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin