Datatables bootstrap breaks modal form

tjdillashaw

Hello, I have a question. Im using Datatables to generate table with button which opens modal window on click. But my modal form looks like this:

But without DT looks like I wanted to:

Im using DataTables just like that:

var table = $('#productsAdminTable')
        table.DataTable({});

Could someone help me?

kthorngren

Are you loading the Datatables Bootstrap styling libraries?
https://datatables.net/download/index

Kevin

tjdillashaw

Yes, I've including these scripts:

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"

kthorngren

Did you include dataTables.bootstrap.min.css?

Kevin

tjdillashaw

Yes, but still does not work

"~/Content/dataTables.bootstrap.min.css",

kthorngren

I tried a couple different modal examples with Datatables and didn't see a difference. The examples have an edit button and when clicked the modal form appears with that row's data. They are simple forms but look the same whether Datatables is enabled on the table or not. Is this what you are doing?

Can you post a link to a page showing the issue?

This will provide steps for creating a test case.
https://datatables.net/manual/tech-notes/10

Kevin

tjdillashaw

Iam using React Bootstrap lib. Does it matter?
https://react-bootstrap.github.io/components.html

I recognized that on smaller screen it appears correctly...