Datatable title and close button issue

peterimbery

I am using the below example
https://datatables.net/extensions/responsive/examples/display-types/bootstrap4-modal.html

When it displays the title where it says 'Details for '+data[0]+' '+data[1];. In the header this information shows up after the close x button.

So it sort of looks like the below

x Appointment Details for

and that is all aligned to the right. I did try some version of bootstrap 3 and it wasn't an issue there so I am thinking it is a bootstrap 4 issue. Not sure how to fix it.

I am creating the modal with the following code

responsive:
{
details:
{
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var Rowdata = row.data();
return 'Appointment Details for: ' + Rowdata["xxxxx"];

                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
            }
        }

I did not create my own modal in in the html I just let jquery handle that.

tangerine

In the header this information shows up after the close x button.

That example is for Bootstrap 4; it does not display in the way you describe.
Are you using the correct CSS?

peterimbery

Yes I am using the js and css that is listed in the example.

When I view the source of the model I can see the h5 tag with the title is in fact being displayed after the close button.

I understand the example on that page works. I am saying I do the exact same thing in my code with the same js and css and that is the way it displays.

tangerine

The modal in the example has a h4 heading followed by the close button.