javascript - Datatables table header is not resizing when sidebar is hidden

I've added sidebar to one of View, where table is located. I'm using datatables plugin for this table.

Sidebar can be toggled or hidden. Problem occurs when I hide sidebar. Table body resizes correctly, but header doesn't. I can adjust header by clicking on it. By resizing, I meant that I change parent width like this:

.page-wrapper.toggled .page-content .tasks-list {
        width: -webkit-calc(100% - 300px);
        width: -moz-calc(100% - 300px);
        width: calc(100% - 300px);
    }

I'm providing code snippet below. You would need to enter fullpage mode to see my problem.

I read that columns.adjust() function might help, but it didn't. I don't have any more ideas how I can fix it.

How to resize table header or adjust it to tbody width ?

$(document).ready(function () {

            var table = $('#testtable').DataTable({
                scrollY: 500,
                searching:false,
                paging:false
                //fixedHeader: {
                //    header: true,
                //    headerOffset: 230
                //}
            });

            $("#close-sidebar").click(function () {
                $(".page-wrapper").removeClass("toggled");
                //table.columns.adjust(); have tried this but does not work  
            });
            $("#show-sidebar").click(function () {
                $(".page-wrapper").addClass("toggled");
                //table.columns.adjust(); have tried this but does not work 
            });

        });

html, body {
    height: 100%;
    overflow-x: hidden;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
    margin: auto auto;
}

.table tr {
    cursor: pointer;
}


tr {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.page-content {
    height: 100%;
}

#task-wrapper {
    z-index: 1;
    background: white;
    width: 100%;
    height: 200px;
}

.tasks-list {
    position: absolute;
    overflow-y: hidden;
    width: 100%;
}

    .page-wrapper .theme {
        width: 40px;
        height: 40px;
        display: inline-block;
        border-radius: 4px;
        margin: 2px;
    }

        .page-wrapper .theme.chiller-theme {
            background: #1e2229;
        }

    /*----------------toggled sidebar----------------*/

    .page-wrapper.toggled .sidebar-wrapper {
        left: 0px;
    }

@media screen and (min-width: 768px) {
    .page-wrapper.toggled .page-content {
        padding-left: 300px;
    }

        .page-wrapper.toggled .page-content .tasks-list {
            width: -webkit-calc(100% - 300px);
            width: -moz-calc(100% - 300px);
            width: calc(100% - 300px);
        }
}

body {
    font-size: 0.9rem;
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#show-sidebar {
    position: fixed;
    left: 0;
    top: 10px;
    border-radius: 0 4px 4px 0px;
    width: 35px;
    transition-delay: 0.3s;
}

.page-wrapper.toggled #show-sidebar {
    left: -40px;
}
/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
    width: 260px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
    color:white;
}


/*--------------------------page-content-----------------------------*/

.page-wrapper .page-content {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
    padding-top: 20px;
}

    .page-wrapper .page-content > div {
        padding: 20px 40px;
    }

.page-wrapper .page-content {
    overflow-x: hidden;
}

<script src=".3.1/jquery.min.js"></script>
<script src=".10.19/js/jquery.dataTables.min.js"></script>
<link href=".10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href=".0.0/css/bootstrap.min.css"/>
<div class="page-wrapper chiller-theme toggled">
  <a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
    <i class="fas fa-bars"></i>
  </a>
  <nav id="sidebar" class="sidebar-wrapper bg-dark">
      <div class="sidebar-content">
        <div id="close-sidebar">
          <i class="fas fa-times">CLOSE</i>
        </div>
      </div>
  </nav>
  <!-- sidebar-wrapper  -->
  <main class="page-content bg-light">
    <div class="row tasks-list">
      <div class="col">
        <div id="result">
          <table id="testtable" class="table display" style="width:100%;">
            <thead class="bg-light">
              <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
              </tr>
            </thead>
            <tbody>
              <tr id="10749" role="row" class="odd">
                <td class="sorting_1">10749</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14581" role="row" class="even">
                <td class="sorting_1">14581</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14794" role="row" class="odd">
                <td class="sorting_1">14794</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14950" role="row" class="even">
                <td class="sorting_1">14950</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="15128" role="row" class="odd">
                <td class="sorting_1">15128</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </main>
</div>

I've added sidebar to one of View, where table is located. I'm using datatables plugin for this table.

.page-wrapper.toggled .page-content .tasks-list {
        width: -webkit-calc(100% - 300px);
        width: -moz-calc(100% - 300px);
        width: calc(100% - 300px);
    }

I'm providing code snippet below. You would need to enter fullpage mode to see my problem.

I read that columns.adjust() function might help, but it didn't. I don't have any more ideas how I can fix it.

How to resize table header or adjust it to tbody width ?

$(document).ready(function () {

            var table = $('#testtable').DataTable({
                scrollY: 500,
                searching:false,
                paging:false
                //fixedHeader: {
                //    header: true,
                //    headerOffset: 230
                //}
            });

            $("#close-sidebar").click(function () {
                $(".page-wrapper").removeClass("toggled");
                //table.columns.adjust(); have tried this but does not work  
            });
            $("#show-sidebar").click(function () {
                $(".page-wrapper").addClass("toggled");
                //table.columns.adjust(); have tried this but does not work 
            });

        });

html, body {
    height: 100%;
    overflow-x: hidden;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
    margin: auto auto;
}

.table tr {
    cursor: pointer;
}


tr {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.page-content {
    height: 100%;
}

#task-wrapper {
    z-index: 1;
    background: white;
    width: 100%;
    height: 200px;
}

.tasks-list {
    position: absolute;
    overflow-y: hidden;
    width: 100%;
}

    .page-wrapper .theme {
        width: 40px;
        height: 40px;
        display: inline-block;
        border-radius: 4px;
        margin: 2px;
    }

        .page-wrapper .theme.chiller-theme {
            background: #1e2229;
        }

    /*----------------toggled sidebar----------------*/

    .page-wrapper.toggled .sidebar-wrapper {
        left: 0px;
    }

@media screen and (min-width: 768px) {
    .page-wrapper.toggled .page-content {
        padding-left: 300px;
    }

        .page-wrapper.toggled .page-content .tasks-list {
            width: -webkit-calc(100% - 300px);
            width: -moz-calc(100% - 300px);
            width: calc(100% - 300px);
        }
}

body {
    font-size: 0.9rem;
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#show-sidebar {
    position: fixed;
    left: 0;
    top: 10px;
    border-radius: 0 4px 4px 0px;
    width: 35px;
    transition-delay: 0.3s;
}

.page-wrapper.toggled #show-sidebar {
    left: -40px;
}
/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
    width: 260px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
    color:white;
}


/*--------------------------page-content-----------------------------*/

.page-wrapper .page-content {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
    padding-top: 20px;
}

    .page-wrapper .page-content > div {
        padding: 20px 40px;
    }

.page-wrapper .page-content {
    overflow-x: hidden;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables/1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css"/>
<div class="page-wrapper chiller-theme toggled">
  <a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
    <i class="fas fa-bars"></i>
  </a>
  <nav id="sidebar" class="sidebar-wrapper bg-dark">
      <div class="sidebar-content">
        <div id="close-sidebar">
          <i class="fas fa-times">CLOSE</i>
        </div>
      </div>
  </nav>
  <!-- sidebar-wrapper  -->
  <main class="page-content bg-light">
    <div class="row tasks-list">
      <div class="col">
        <div id="result">
          <table id="testtable" class="table display" style="width:100%;">
            <thead class="bg-light">
              <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
              </tr>
            </thead>
            <tbody>
              <tr id="10749" role="row" class="odd">
                <td class="sorting_1">10749</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14581" role="row" class="even">
                <td class="sorting_1">14581</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14794" role="row" class="odd">
                <td class="sorting_1">14794</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="14950" role="row" class="even">
                <td class="sorting_1">14950</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
              <tr id="15128" role="row" class="odd">
                <td class="sorting_1">15128</td>
                <td>Value</td>
                <td>Value</td>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </main>
</div>

Share Improve this question asked Jun 12, 2019 at 8:52 fanarek 3674 silver badges18 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

just add this to your css :

    .dataTables_scrollHeadInner, .table{
      width:100%!important
         };

this will always make tr fit the full table width!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Datatables table header is not resizing when sidebar is hidden - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)