Height adjustment of DataTable in hidden bootstrap div

obi262

I have a dataTable that is initialised inside a hidden div, on a button click the div shows itself and the user should be able to look at the table. My issue is that the table gets initialised while hidden, thus the heights of its wrappers and rows is not working correctly. I have tried many different functions including fnAdjustColumnSizing, setting the table to responsive and calling the funtion to resize it, and just tried api().columns.adjust(). None of them make the table fill its parent container as it does before I set it to hidden. Code follows:

<div class="col-md-6 hidden" id="advertRight">
            <div class="panel panel-default" style="height:96%;">
                <div class="panel-body" style="height:100%;">
                    <div class="col-md-12 col-xs-12 panel panel-default" id="slotValueGrid" style="height:80%; width:100%">
                        <table id="example" class="display" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Time of Day</th>
                                    <th>Monday</th>
                                    <th>Tuesday</th>
                                    <th>Wednesday</th>
                                    <th>Thursday</th>
                                    <th>Friday</th>
                                    <th>Saturday</th>
                                    <th>Sunday</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>00:00 - 01:00</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>£1000</td>
                                    <td>£2000</td>
                                    <td>£1000</td>
                                    <td>-</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                    <td>01:00 - 02:00</td>
                                    <td>-</td>
                                    <td>-</td>
                                    <td>£2000</td>
                                    <td>£3000</td>
                                    <td>£500</td>
                                    <td>-</td>
                                    <td>-</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> 

Initialization

var table = $('#example').DataTable({
                "bAutoWidth":false,
                "scrollX": true,
                "scrollCollapse": true,
                "scrollY": $(slotValueGrid).height()*0.75,
                "searching": false,
                "bLengthChange": false,
                "bPaginate": false,
                "bInfo": false
                
            });
            new $.fn.dataTable.FixedColumns(table, {
                leftColumns: 1
            }); 

onClick function
```
function displayAdvertRight() {
$("#advertLeft").removeClass("col-md-offset-3");
$("#advertRight").removeClass("hidden");
$('#example').DataTable().api().columns.adjust();
}

```