DataTable column width with select in th - datatables

Question

Using Bootstrap 4 with DataTables. I have a hidden card containing a datatable. When loading the page if a saved preference (to show the card containing the table) is checked then I show the card and then adjust the columns and draw:
a piece of $(document).ready:
/* code to create table here */
/* wait for the table initialization to finish before restoring card visibility */
$('#dashboardProfitsTable').on('init.dt', function(e, settings, json) {
$.when(
restorePrefs(currentPrefPage))
.done(function() {
/* did user leave this card visible last time? */
if ($('input[name=ShowProfit]').is(":checked")) {
$('#profitsCard').show();
dashboardProfitsTable.columns.adjust().draw();
}
});
});
and some relevant HTML:
<div id="profitsCard" class="card" style="display:none">
<div class="card-body pt-0 pb-2">
<table id="dashboardProfitsTable" class="table" style="width:100%">
<thead>
<tr>
<th></th>
<th><select id="column1" class="form-control"></select></th>
<th><select id="column2" class="form-control"></select></th>
<th><select id="column3" class="form-control"></select></th>
<th><select id="column4" class="form-control"></select></th>
</tr>
</thead>
After the show() the right side of the select in the right column (Last 30 Days) is clipped by a couple of pixels:
but if I resize the window width even 1 pixel (wider or narrower; doesn't matter) the table recalcs widths and redraws so the right side of the 4th is not clipped:
And after that initial window resize everything is fine at every width. It's just the initial show() that clips the rightmost select. Is there something I can do besides columns.adjust().draw() after show() to get the datatable to recalc as if it was doing a window resize recalc?