php - Responsive datatable is not working while fetching data in the modal with javascript

one text

My Javascript code is as follows

`

<script type="text/javascript">
$(document).ready(function() {
    $(document).on('click', '.modal_view_user_btn', function() {

        $('#modal_view_user').modal('show');

        $tr = $(this).closest('tr');
        var data = $tr.children("td").map(function() {

            return $(this).text();
        }).get();

        console.log(data);

        $('#vid_user_name').val(data[0]);
        $('#vid_user_email').val(data[1]);
        $('#vid_user_designation').val(data[2]);
        $('#vid_user_mobile').val(data[3]);
        $('#vid_user_landline').val(data[4]);
        $('#vid_user_role_id').val(data[5]);
        $('#vid_user_login_status').val(data[6]);
        $('#vid_user_picture').val(data[7]);
        0
    });
});
</script>

`

I used above code to fetch data in modal. placed one input as follows:

`

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="vid_user_designation"
                                    class="col-sm-8 col-form-label  text-primary">Designation</label>
                                <div>
                                    <input class="form-control" type="text" name="user_designation"
                                        id="vid_user_designation" style="border-style: hidden; background-color: white;"
                                        readonly>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">

                            <div class="mb-3">
                                <label for="vid_user_mobile"
                                    class="col-sm-8 col-form-label  text-primary">Mobile</label>
                                <div>
                                    <input class="form-control" type="tel" name="user_mobile" id="vid_user_mobile"
                                        style="border-style: hidden; background-color: white;" readonly>

                                </div>
                            </div>
                        </div>
                    </div>

`

it workds properly When the table is shown as full screen[![enter image description here]the results are ok for instance as per below screen

(https://i.stack.imgur.com/j5me8.png)](https://i.stack.imgur.com/j5me8.png)

When i change the view to responsive style the data is not shown , infact headings of table started shown.