Replies

• colin Posts: 15,240Questions: 1Answers: 2,599

  March 2022

  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
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  March 2022

  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
• krneeraj1407 Posts: 5Questions: 0Answers: 0

  March 2022 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.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  March 2022

  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
• krneeraj1407 Posts: 5Questions: 0Answers: 0

  March 2022

  Yes it is running to me but not generate data table.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  March 2022

  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
• krneeraj1407 Posts: 5Questions: 0Answers: 0

  March 2022

  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
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  March 2022 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
• krneeraj1407 Posts: 5Questions: 0Answers: 0

  April 2022

  @kthorngren

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

  I tried this way with CSS but it isn't work for me.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  April 2022

  In styles.css you have:

  .container {
      display: flex;
  

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

  Allan