Problem with scrollX

Runner8577

Hello, I have a problem with scrollX indeed it adds me a vertical scroll except that it also adds me on my page in addition to the table when it becomes too big.
Here is the screenshot and the source code.

<div class="row">
        <div class="col-sm-11">
            <table id="example" class="display nowrap" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
                <th>Test 1</th>
                <th>Test 2</th>
                <th>Test 4</th>
                <th>Test 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td>
                <td>t.nixon@datatables.net</td> 
                <td>t.nixon@datatables.net</td> 
            </tr>
        </tbody>
    </table>
        </div>
    </div>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
            <script type="text/javascript">
                $(document).ready( function () {
                    $('#example').dataTable( {
                        "scrollX": true
                    } );
                } );
            </script>

Thanks in advance.
Nicolas

kthorngren

Your code snippets seem to work in this test case:
http://live.datatables.net/hukenise/1

Please update the test case to replicate your issue.

Looks like you are using Bootstrap but are not using the Datatables Bootstrap integration files. Doing so may help. You can use the Download Builder to obtain the correct files.

This doc discusses Datatables styling and has info for both BS3 and BS4:
https://datatables.net/manual/styling/

You can also find BS3 and BS4 examples here:
https://datatables.net/examples/styling/

Kevin

Runner8577

After testing it works when I do not put the bootstrap CSS

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

But suddenly after my site is all broken

kthorngren

I suggest using the Download Builder as I described above to get the Datatables BS4 styling files. I suspect this will fix your issue. If not then please update the test case I provided so we can see the issue. Otherwise it will be very difficult for us to offer suggestions.

Kevin

Runner8577

I used the Download Builder but the same.
I have updated the test case

http://live.datatables.net/hukenise/4/edit

And the problem is present
Thank you for your help and your patient

colin

Hi @Runner8577 ,

I'm looking at that test case, thanks for that, but I'm not clear what's wrong with it. Could you explain what I need to do, what is wrong, and what you believe the correct behaviour should be, please?

Cheers,

Colin

Runner8577

There is a horizontal scroll at the bottom of the page that there was not before in addition to the horizontal scroll of the table.
When I remove, the bootstrap CSS script the horizontal footer scroll disappears, I do not understand why.

Thanks,

colin

Hi @Runner8577 ,

Ah, I see. It's because it was not including the correct source files - I've updated your example here, so please check out the differences between the two,

Cheers,

Colin

Runner8577

Hi @colin
Thank you for your help but it does not seem to work on my page in production I always have two horizontal scrolls on the board and the other at the bottom of my page.
Here is the URL for you to look at the source code of my page in production.

test.nhd-technology.net/Eroce_V2/test_datatables/dossier_demande/pilotage_dossier/gestion_pilotage_dossier.php

Thanks again for your help: /

colin

Hi @Runner8577 ,

I just looked at that link and am not seeing the problem with the always present horizontal scroll:

If I downsize the screen size, I see scrollbars appear then, but that would be expected because of the size of the containers.

Cheers,

Colin

Runner8577

Hi @colin ,
It's really strange, because I have the horizontal scroll even in full screen!

It's as if scrollY did not detect the max size of col-12 to bootstrap...

I tried with Safari and Google Chrome and there is exactly the same problem.
I think I will give up "Datatables" and find another idea for presenting this big picture: / Damage.

allan

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

Allan

Runner8577

Hello @allan ,

Yes it is already the case, the two methods give the same result !

Even if I decrease this value, the HTML table is always off the page

Runner8577

<div class="d-flex">
                <!--
                    MENU DE GAUCHE
                -->
                <?php include( "$ss/includes/menu_gauche.php" ); ?>

                <div class="content p-4">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-5">
                                <table id="example" class="display nowrap test table" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">First</th>
                                            <th scope="col">Last</th>
                                            <th scope="col">Handle</th>
                                            <th scope="col">1</th>
                                            <th scope="col">2</th>
                                            <th scope="col">3</th>
                                            <th scope="col">4</th>
                                            <th scope="col">5</th>
                                            <th scope="col">6</th>
                                            <th scope="col">7</th>
                                            <th scope="col">8</th>
                                            <th scope="col">9</th>
                                            <th scope="col">10</th>
                                            <th scope="col">11</th>
                                            <th scope="col">12</th>
                                            <th scope="col">13</th>
                                            <th scope="col">14</th>
                                            <th scope="col">15</th>
                                            <th scope="col">16</th>
                                            <th scope="col">17</th>
                                            <th scope="col">18</th>
                                            <th scope="col">19</th>
                                            <th scope="col">20</th>
                                        </tr>
                                    </thead>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                            <td>@mdo</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

I use the class "d-flex" in the first "div" would not it be this class that is problematic?

allan

The DataTable is in a col-sm-11 which is why its looking a bit short compared to the other content on the page. Also, remove the

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />

line. You only need to load the Bootstrap 4 integration for DataTables if you are using BS4.

Could you make those changes and I'll take another look. It looks close!

Allan

Runner8577

Hi @allan ,
I removed the reference to col-sm-11.
I also left only bootstrap 4 integration for DataTables but now I have no Bootstrap style on my page.
Here is the link to my test platform.

localhost/Eroce_V2/dossier_demande/pilotage_dossier/gestion_pilotage_dossier_test.php

Thank you

allan

That's a localhost URL. Are you able to update it to be publically accessible please?

Allan

Runner8577

@allan

Oups sorry

test.nhd-technology.net/Eroce_V2/test_datatables/dossier_demande/pilotage_dossier/gestion_pilotage_dossier_test.php

colin

Hi @Runner8577 ,

That page looks like it's a just a menu on the left-hand side - can you give instructions on how to reproduce the issue, please?

Cheers

Colin

Runner8577

Hi @colin

I just deleted link bootstrap CSS for use only

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />

But after my style is broken

Runner8577

Nobody for help

colin

As I said,

That page looks like it's a just a menu on the left-hand side - can you give instructions on how to reproduce the issue, please?

kthorngren

Your example is still loading Bootstrap and jquery.dataTables.css as Allan noted above.

The best option is to use the Download Builder to obtain the correct files for Datatables abd BS4 integration.

Kevin