Vertical Page Fitting pushing table off the bottom of the screen.

jawknee530

I'm trying to use this functionality: https://datatables.net/blog/2015/vertical-page-fitting

In my page I have a sidebar set up like so:

<div class="d-flex align-items-end flex-column flex-shrink-0 p-3" style="width: 240px">
</div>

Then I have a container with several rows and the final row is a table with height set to 100.:

<div class="container">
  <div class="row h-auto">
  <div>
  <div class="row h-auto">
  <div>
  <div class="row h-100">
  <div>
</div>

That final div has a form and table with form submission buttons in it:

<form id="upd-form" method="post">

    <table id="EngineTable" class="table table-striped nowrap table-sm" width="100%" style="display:none">
        <thead>
            <tr>
                <th>Id</th>
                <th>Engine</th>
                <th>Server</th>
                <th>DC</th>
                <th>Exchange</th>
                <th>Strategy</th>
                <th>Owner</th>
                <th>Use</th>
                <th>Env</th>
                {% if accessLevel == "Admin" %}
                <th>Actions</th>
                {% endif %} 
            </tr>
        </thead>
        <tbody>
            {% for row in engines %}
            <tr>
                <td>{{ row.EngineId }}</td>
                <td>{{ row.EngineName }}</td>
                <td>{{ row.ServerName }}</td>
                <td>{{ row.DataCenter }}</td>
                <td>{{ row.Exchange }}</td>
                <td>{{ row.TradingStrategyName }}</td>
                <td>{{ row.OwnerGroup }}</td>
                <td>{{ row.UseCase }}</td>
                <td>{{ row.EnvironmentType }}</td>
                {% if accessLevel == "Admin" %}
                <td>
                    <button type="submit" id="StopEngineBtn" value="{{ row.EngineName }}" name="StopEngineBtn" class="btn btn-primary btn-sm btn-danger">Stop</button> &nbsp;&nbsp;&nbsp;
                    <button type="submit" id="StartEngineBtn" value="{{ row.EngineName }}" name="StartEngineBtn" class="btn btn-primary btn-sm btn-success">Start</button> &nbsp;&nbsp;&nbsp;
                    <button type="submit" id="RestartEngineBtn" value="{{ row.EngineName }}" name="RestartEngineBtn" class="btn btn-primary btn-sm btn-warning">Restart</button>
                </td>
                {% endif %} 
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
            new DataTable('#EngineTable', {
                responsive: true,
                pageResize: true,
                initComplete: function() {
                    $('#EngineTable').show();
                }
            });
        });
    </script>
</form> 

It seems like pageResize is working but it's trying to set the height of the table to the full height of the screen instead of the height that's available after the two rows above it are factored in. It this just a limitation of the functionality or am I missing a step?

allan

Can you link to a test page showing the issue please?

It will basically operate on the DataTables container. Whatever space the container is allowed it will take up.

Allan

jawknee530

https://live.datatables.net/yixoxeko/4/

here's an example of what I'm doing. Basically a with a fixed sidebar and a main content panel. The panel is split into three rows for header, status, and data and I want the data table to expand up to the available space on the page

jawknee530

https://live.datatables.net/yixoxeko/4/edit?html,css,js,output

allan

The container doesn't take up the full height available to it. Your other thread has a container which does, but it looks like it might have an integration issue with Responsive.

Allan

jawknee530

Thanks allan. I assumed this thread was old enough it wouldn't have gotten any response so made that second one. How can I get the container to take up the full height available while having the table still fit on screen? What I want is a border around the table that is the size of the table but if the table is smaller than the screen the border would scale out to the full height of the screen and not hug the table. Does that make sense?

allan

You need to refer to the Bootstrap documentation I'm afraid. I'm not entirely sure what the correct classes from Bootstrap would be to setup the grid that you are looking for.

What I would suggest is create a layout that you want without the DataTable initially - i.e. just three / four sections, which have background colours so you can easily identify them, and see how they react when resized.

Sorry I don't have a better answer, while I know a bit about Bootstrap, I've far from an expert in it and they would be better places to provide support for their library than I am.

Once you've got the layout, hopefully the page resize plugin should just work. If it doesn't let me know.

Allan