ScrollX does not work in Angular

johnnyatt

Hello,
I am trying to use datatable in angular 6 and was able to configure scrolly, but I am having a challenge with scrollx.
here is my dtoption set up and tables.

from component.ts
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
scrollX: true,
scrollY: '500',
};

from html

<

table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="display nowrap" style="width:100%">

Thanks.

kthorngren

What does not work?

Does the scroll bar not appear or not scroll?

Maybe you can post a screenshot of the issue.

Kevin

johnnyatt

Sorry, so I have 20 columns, the table populates long width of table with vertical scroll bar but, horizontal scroll bar does not appear at all

johnnyatt

@kthorngren
Hey Kevin, will you be able to assist me.
I will be really appreciate for your help and effort.
Thanks!

kthorngren

Just a guess since you have posted much about the rest of the page but it looks like there is a scrollbar at the bottom of the screenshot. Maybe the div the table is in is scrolling which might keep scrollX from activating. Something like this example with overflow:auto; maybe?

http://live.datatables.net/zukudona/1/edit

Kevin

kthorngren

My example was incorrect. I had scrollX disabled. The updated example does work:
http://live.datatables.net/yazalaze/1/edit

Can you post a link to your page are a test case showing the issue? The problem is something in your environment causing scrollX to not activate.

Kevin

vivek27

https://datatables.net/reference/option/scrollX

use "nowrap" class