Horizontal scroll not working properly

Horizontal scroll not working properly

krneeraj1407krneeraj1407 Posts: 5Questions: 0Answers: 0
edited March 2022 in DataTables

I am using Angular Data table.
After screen size increase or decrease it will work properly.
See below another example working fine after reduce screen size.

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    It's working as expected here. 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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Looks like the first screenshot the table is able to fit within the width of the container so there is no need for scrolling thus the scroll bar doesn't show.

    Kevin

  • krneeraj1407krneeraj1407 Posts: 5Questions: 0Answers: 0
    edited March 2022

    Hi Colin,

    https://stackblitz.com/edit/angular-ivy-waxcci?file=package.json

    Here is the example so i need to use data table with horizontal scroll bar and no wrap text.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Thanks for the link - however, once the "server" starts the page shows:

    Error in src/app/app.component.ts (12:14)
    Cannot find namespace 'DataTables'.
    

    Is that example running for you?

    Allan

  • krneeraj1407krneeraj1407 Posts: 5Questions: 0Answers: 0

    Yes it is running to me but not generate data table.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Seems that it gives the error I saw in Firefox, but it loads in Chrome...

    You note that it doesn't generate a DataTable. So it doesn't actually demonstrate the issue you are seeing? I need a test case showing the problem you are having to be able to help resolve it.

    Allan

  • krneeraj1407krneeraj1407 Posts: 5Questions: 0Answers: 0

    Hi Allan,

    Here is the working Data table we just want to use horizontal scroll with no wrap text.

    https://stackblitz.com/edit/angular-mzinwm-75nauj?file=src%2Fapp%2Fproduct-list%2Fproduct-list.component.ts

    Can you help me out.

    Regards
    Neeraj

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2022

    You table tag:

    <table datatable [dtOptions]="dtOptions" class="row-border hover table">
    

    with no wrap text

    The Styling docs show the table styling options available. Try adding nowrap to the table tag.

    we just want to use horizontal scroll

    Try adding style="width:100%" to the table tag as documented in this example. This should allow Datatables to calculate the width of the container its in.

    Kevin

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    In styles.css you have:

    .container {
        display: flex;
    

    That is what is causing the issue. Remove that and the page will layout correctly.

    Allan

Sign In or Register to comment.