DataTable used inside popup causing issue on the responsive view as well as on actual devices

gaurav_2019

The DataTable used for one my project's have an issue on the responsive view. The table loads in its desktop view even in mobile unless we make some movement (like scroll) or change in viewport of window causes the Table to turn responsive below is the code for same.... Kindly help soon....

<div id="myModal" class="modal fade" role="dialog">

``` ```

```

``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ```

Package ID	Master ID	Master Name	Package Category	Package type	Package Name	Stays	Departure Date	Departure City
456	123	SUP 14 Nights	Daily Umrah	Super Saver	Bom 04 Sup SV	``` ``` Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019 ``` Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019 ``` ```	``` 04/02/2019 ``` 04 : 15 PM ```	Mumbai
457	123	SUP 14 Nights	Daily Umrah	Super Saver	Bom 04 Sup SV	``` ``` Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019 ``` Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019 ``` ```	``` 04/02/2019 ``` 04 : 15 PM ```	Mumbai
459	123	SUP 14 Nights	Daily Umrah	Super Saver	Bom 04 Sup SV	``` ``` Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019 ``` Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019 ``` ```	``` 04/02/2019 ``` 04 : 15 PM ```	Mumbai
456	153	SUP 14 Nights	Daily Umrah	Super Saver	Bom 04 Sup SV	``` ``` Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019 ``` Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019 ``` ```	``` 04/02/2019 ``` 04 : 15 PM ```	Mumbai
456	153	SUP 14 Nights	Daily Umrah	Super Saver	Bom 04 Sup SV	``` ``` Stay 1: Makkah, Al Azka, 12/01/2019 - 15/01/2019 ``` Stay 2: Madinah, Al Safa, 12/01/2019 - 15/01/2019 ``` Stay 3: Madinah, Al Safa, 12/01/2019 - 15/01/2019 ``` ```	``` 04/02/2019 ``` 04 : 15 PM ```	Mumbai

```

```

``` ``` ```

```

```

```</div>

<script src="../js/jquery.dataTables.min.js"></script>
<script src="../js/dataTables.bootstrap.min.js"></script>

<script> $(document).on('show.bs.modal','#myModal', function () {
$('#example').DataTable({ autowidth:false,
responsive: { details: {
display: $.fn.dataTable.Responsive.display.modal( { header: function ( row ) {
var data = row.data(); return 'Details for '+data[0]+' '+data[1];
} } ),
renderer: $.fn.dataTable.Responsive.renderer.tableAll( { tableClass: 'table'
} ) }
} });
}) </script>

colin

Hi @gaurav_2019 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin