Weird behavior when option "scrollX" is set to "true"

lat94 · March 2018

When I load the page, the data-table is being rendered really weird when option "scrollX" is set to "true". Have a look at my code:

$(document).ready( function () {
                $('#tblSales').DataTable({          
                    "language": {
                        "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Portuguese-Brasil.json"
                    },                     
                    "lengthMenu": false,             
                    "bLengthChange": false,
                    "scrollX": true,
                    "responsive": true,
                    "pageLength": 5

                });  


            });

Now, here is how it is displayed:

If I click on a thead, e.g. "Situação"(or any other), it goes back to what was expected, see image below:

Then I went to the code trying to find why this weird behavior, and when I set "scrollX" to false then the table rendered just fine. But without being able scroll horizontally.

Does anybody know what the heck is going on here?

usefull:

        <!-->  css being used -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>

    <div class="container col-md-12 tblHolder" >
            <table id="tblSales" class="table table-bordered table-responsive-md table-condensed" cellspacing="0">
            <!--code omitted for clarity -->

    <!-- data table -->
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>

allan · March 2018

Can you add width="100%" or style="width: 100%" to your table please?

Allan

lat94 · March 2018

Nice, but I already tried this one. I will keep the width to 100%

allan · March 2018

Can you link to a page showing the issue so we can debug it if that didn't resolve the issue please.

Allan

lat94 · March 2018

Alright. But as I am sing .net core framework I will be pasting here the client-side code, ok?

<!--table sorter --> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>


        <div class='filter col-md-12' >
            <h4>Listagem de Vendas</h4>




        </div>

        <div class="container col-md-12 tblHolder" >
        <table id="tblSales" class="table table-bordered table-responsive-md table-condensed" cellspacing="0">
        <thead>
            <tr>
                <th>Editar/Remover</th>
                <th>Usu&#xE1;rio</th>
                <th>Entrega</th>
                <th>Empresa</th>
                <th>Situa&#xE7;&#xE3;o</th>
                <th>Pedido</th>
                <th>Romaneio</th>
                <th>Cliente</th>
                <th>Pagamento</th>              


            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Editar/Remover</th>
                <th>Usu&#xE1;rio</th>
                <th>Entrega</th>
                <th>Empresa</th>
                <th>Situa&#xE7;&#xE3;o</th>
                <th>Pedido</th>
                <th>Romaneio</th>
                <th>Cliente</th>
                <th>Pagamento</th>                

            </tr>


        </tfoot>
        <tbody>  
                <tr id="trSales">
                    <td style="text-align: center;">
                        <span class="table-remove ">
                            <div class="btn-group" role="group">
                                <button type="button"  class="btn btn-warning btn-rounded btn-sm" id=""><span class="glyphicon glyphicon-pencil"></span></button>
                                <button type="button"  class="btn btn-danger btn-rounded btn-sm" id="btnDel"><span class="glyphicon glyphicon-remove"></span></button>                                
                            </div>                            
                        </span>
                    </td>
                    <td>FTOLO</td>
                    <td>14/05/2017</td>
                    <td >1</td>
                    <td>Aprovado</td>
                    <td>1614894</td>
                    <td>378157</td>
                    <td>ALMONTI</td>
                    <td>A vista</td>

                </tr>
                <tr id="trSales">
                    <td style="text-align: center;">
                        <span class="table-remove ">
                            <div class="btn-group" role="group">
                                <button type="button"  class="btn btn-warning btn-rounded btn-sm" id=""><span class="glyphicon glyphicon-pencil"></span></button>
                                <button type="button"  class="btn btn-danger btn-rounded btn-sm" id="btnDel"><span class="glyphicon glyphicon-remove"></span></button>                                
                            </div>                            
                        </span>
                    </td>
                    <td>BSILVEIRA</td>
                    <td>21/11/2019</td>
                    <td >14</td>
                    <td>Pendente</td>
                    <td>6936473</td>
                    <td>15674</td>
                    <td>RIBEIRO</td>
                    <td>A prazo</td>

                </tr>
                <tr id="trSales">
                    <td style="text-align: center;">
                        <span class="table-remove ">
                            <div class="btn-group" role="group">
                                <button type="button"  class="btn btn-warning btn-rounded btn-sm" id=""><span class="glyphicon glyphicon-pencil"></span></button>
                                <button type="button"  class="btn btn-danger btn-rounded btn-sm" id="btnDel"><span class="glyphicon glyphicon-remove"></span></button>                                
                            </div>                            
                        </span>
                    </td>
                    <td>JDORTH</td>
                    <td>23/09/2014</td>
                    <td >2</td>
                    <td>Aprovado</td>
                    <td>5696453</td>
                    <td>454335</td>
                    <td>REBOU&#xC7;AS</td>
                    <td>A vista</td>

                </tr>
                <tr id="trSales">
                    <td style="text-align: center;">
                        <span class="table-remove ">
                            <div class="btn-group" role="group">
                                <button type="button"  class="btn btn-warning btn-rounded btn-sm" id=""><span class="glyphicon glyphicon-pencil"></span></button>
                                <button type="button"  class="btn btn-danger btn-rounded btn-sm" id="btnDel"><span class="glyphicon glyphicon-remove"></span></button>                                
                            </div>                            
                        </span>
                    </td>
                    <td>MFARIA</td>
                    <td>01/12/2011</td>
                    <td >13</td>
                    <td>Cancelado</td>
                    <td>6356345</td>
                    <td>43452</td>
                    <td>NESTLE</td>
                    <td>A vista</td>

                </tr>


        </tbody>
    </table>

        </div>

         <!-- data table -->
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>




        <script type="text/javascript">
            /*date picker
            $(function () {
                $('#datetimepicker1').datetimepicker({


                    format: 'DD/MM/YYYY',
                    locale: 'pt-BR'
                });
            });  */


            $(document).ready( function () {
                $('#tblSales').DataTable({          
                    "language": {
                        "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Portuguese-Brasil.json"
                    },                     
                    "lengthMenu": false,             
                    "bLengthChange": false,
                    "scrollX": true,
                    "responsive": true,
                    "pageLength": 5

                });  


            });


         $(".dropdown-menu a").click(function(){
             $("#selected").text($(this).text());

         });

         $('.table-remove').click(function () {
            $(this).parents('tr').detach();
         });







        </script>


            </div>
        </section>

                <!-- 3rd tab begins -->
        <section id="tab3" class="tab-content hide">
            <div>

But as you can see here datatables example it is working fine.

allan · March 2018

I don't see the width or style attribute on your table element that we discussed before:

<table id="tblSales" class="table table-bordered table-responsive-md table-condensed" cellspacing="0">

Should be:

<table id="tblSales" class="table table-bordered table-responsive-md table-condensed" cellspacing="0" style="width:100%">

Allan

lat94 · March 2018

Thanks, but as I mentioned before, I already did it, and it did not fix the problem.
I am setting the width to 100%. What else could be the source of my issue?

allan · March 2018

I'm sorry, but without a link to a page showing the issue there isn't anything I can do as I can't debug the problem. I'm just going on what you show above, which didn't include the attributes which is why I mentioned it again.

Allan

Weird behavior when option "scrollX" is set to "true"

Weird behavior when option "scrollX" is set to "true"

Answers

Howdy, Stranger!

Categories

DataTables

Weird behavior when option "scrollX" is set to "true"

Weird behavior when option "scrollX" is set to "true"

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables