ScrollY option is breaking width:100% CSS

codered1988

Hello, I'm new to coding so hopefully i include everything you need to get a clear picture of the problem/solution. Any help would be greatly appreciated.

Problem:
I'm trying to make a DataTable that fits into the height and width of the div it resides, even if user resizes the screen. The problem i'm running into is the the css "width:100%;" works fine to increase/decrease table width until i use the "scrollY" option to adjust the height. Once I use scrollY the width will increase to 100% when i make the window larger but it won't decrease to 100% width when i'm making the window smaller.

**HTML: **

<div class="wrapper">
<table id="issueTable" style="width: 100%; "> 
        <thead>
            <!-- -------- COLUMN HEADER ROWS -------- -->
            <tr>
                <th colspan="4" style="padding:0px;">
                    <span class="subHeader1">Issues</span>
                </th>
            </tr>
            <tr>
                <th>Issue #</th>
                <th>Date</th>
                <th>Status</th>
                <th>>Subject</th>
            </tr>
        </thead>    

</table>

</div> 

JavaScript:

function loadIssueTable() {
    $.ajax({
        url: 'php/issueTable.php',
        success: function(result){
            var data = JSON.parse(result); 
            $('#issueTable').DataTable( {
                scrollY: 'calc(100vh - 300px)',
                lengthChange: false,
                pageLength: 50,
                data: data, 
                columns: [
                    { data: "Number"},
                    { data: "Date Created"},
                    { data: "Status"},
                    { data: "Abstract"}
                ]
            } );
            
        },
        error: function(result) {
            alert('error: ' + result);
        }           
   });
}

$(document).ready(function(){
    loadIssueTable();
});

colin

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