Closed elvisbegovic closed 2 years ago
Had the same issue, and your workaround seems to work! Thank you
Side note: That will only work if you don't have horz scrolling at all. Can you make a plunkr demo? So ideas it could be:
I think the problem is with the [scrollWidth]="columnGroupWidths.total" input of datatable-scroller. columnGroupWidths.total gets set when the columns of datatable-body are set, but isn't recalculated when calling this.table.recalculate().
@amcdnl I noticed, that it mostly happens for us when the app is initially loaded and I think it has something to do with the browser scrollbar. Something like this:
It also happens with a left sidebar, which has a css transition on the width to scroll in from the side. I tried to fix that by calling this.table.recalculate() after the transition ends, but as described in my previous comment, this doesn't recalculate columnGroupWidths.total.
I also have this useless scrollbar event when my content fit the size of the container. I also had to use the workaround:
.datatable-scroll { width: 100% !important; }
@amcdnl Here is a plunkr demo: http://plnkr.co/edit/rE92NBDkqxzComDLnaj6?p=info On hover the datatable has a transition on width which makes it smaller. Also there is a transitionEnd event listener which calls recalculate() on the datatable, but has no effect. I would expect recalculate() to adjust the datatable to the new width.
To make it better visible, I added a border and overflow visible to ngx-datatable and a background-color to datatable-scroller.
this issue sucks, it is driving me mad
Guys, I found a workaround. It´s not pretty, but works. The problem is that resizing the window makes the datable recalculate and then the datatable-scroll gets smaler then the datatable-row. The idea to fix is when resizing the screen we copy the size of the row to the scroll. I had to use a setTimeout because the resizing of the row occurs after the resize of the window event.
Add this:
@ViewChild('datatable') datatable: DatatableComponent;
@HostListener('window:resize') onResize() { if (this.datatable) { setTimeout(() => { this.datatable.element.querySelector('.datatable-scroll').setAttribute('style', 'width:' + this.datatable.element.querySelector('.datatable-body-row').clientWidth + 'px'); }, 10); } } }
+1
I had this issue inside a ng-modal, so I got the instance of my component on ngAfterViewInit and set the width using the element property:
import { DatatableComponent } from '**@swimlane/ngx-datatable';**
@ViewChild(DatatableComponent, { static: false }) dataTable: DatatableComponent
ngAfterViewInit() {
//In this case I need the component instance for edit the with style inside a ngmodal issue
this.dataTable.element.querySelector('.datatable-scroll').setAttribute('style', 'width:100%');
}
Thanks tiagochi
I was having the same issue. Bizarrely it didn't occur the same way over all browsers, for example Chrome in the mobile view didn't display the misbehavior. In any case, I was able to fix it by doing exactly what some workarounds here suggest; I added the following to the stylesheet for the affected component:
.datatable-scroll{
width:100% !important;
}
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.
not stale.
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.
not stale.
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.
not stale.
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue was closed because it has been stalled for 7 days with no activity.
I'm submitting a ... (check one with "x")
Current behavior I don't understand why when I resize my table add big scrollbar horizontal. Here you can see gif... I tried to
recalculate()
table whe resizing this event is fired but nothing change to my table:Expected behavior I need my DOCUMENT column to have whole space in the middle and when resize stop at [minWidht] PS:status column need to be as in GIF at the end like my GIF, this is OK
Reproduction of the problem
GIF
CODE
What is the motivation / use case for changing the behavior? only when resize because when I refresh page my resize are correct ! not when onResize
Table version: "^5.0.0"
Angular version: 2.0.x 2.4.4
Browser: chrome (last) and firefoy (last)
Language: TypeScript
PS: Potential solution: