Annoying horizontal scrollbar, why horizontal gets shown when it should not?

Hi, why on earth horozintal bar keeps showing it’s ugly face when it should freakin not?!

<mat-card> <mat-card-content> <div fxLayout="column"> <div fxLayout="row"> <mat-form-field style="width: 200px"> <input matInput type="text" placeholder="search" [(ngModel)]="filterValue" (keyup)='updateFilter($event)'> <button mat-button *ngIf="filterValue" matSuffix mat-icon-button aria-label="Clear" (click)="filterValue=''"> <mat-icon>close</mat-icon> </button> </mat-form-field> </div> <div fxLayout="row"> <div fxFlex="40" fxFlex.lt-sm="100" style="border-right: 1px solid gainsboro;"> <ngx-datatable #contactsTable class='material server-scrolling-demo' [rows]='rows' [columnMode]="'force'" [headerHeight]="headerHeight" [footerHeight]="footerHeight" [rowHeight]="rowHeight" [loadingIndicator]="isLoading" [selected]="selected" [selectionType]="'single'" [scrollbarV]="true" (scroll)="onScroll($event.offsetY)" (select)="onSelect($event)"> <ngx-datatable-column name="Picture"> <ng-template let-value="value" ngx-datatable-cell-template> <mat-icon>account_circle</mat-icon> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="FullName"> <ng-template let-value="value" ngx-datatable-cell-template> {{value}} </ng-template> </ngx-datatable-column> </ngx-datatable> </div> </div> </div> </mat-card-content> </mat-card>

I’m submitting a … (check one with “x”)

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Horizontal scrollbar keeps showing on every single table.

Expected behavior Horizontal scrollbar should not get shown

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment: It makes table look ugly.

• Table version: “@swimlane/ngx-datatable”: “^11.3.2”

• Angular version: 6.0.3

• Browser: Chrome 69

• Language: TypeScript 2.7.2

[eyupaltindal]

this is my workaround. the horizontal overflow will show if necessary.

.datatable-scroll{
  width: unset!important;
}

[vivek050495]

i’m facing same issue

 <ngx-datatable #table class="material table-striped table-responsive" (resize)="onColumnResize($event)" [ngClass]="{'wrap-cell': isWrap === true}" [rows]="(!isColumnsEmpty?rows:emptyRows)"
         [columns]="filteredCols" [selectionType]="selectionTypeMode" (cdkObserveContent)="adjustColumnMinWidth()"
        (activate)="onActivate($event)" (select)="onSelect($event)" [selected]="selected" [columnMode]="'force'"
        [rowHeight]="getIsMobile() === false ? 50 : 'auto'" class="material expandable" [headerHeight]="10" 
        [footerHeight]="50" [count]="count" [limit]="limits" [offset]="offset" [scrollbarH]="true" [scrollbarV]="false"
         [selectAllRowsOnPage]="false" [displayCheck]="displayCheck" [rowClass]="getRowClass" [virtualization]="false" 
        (page)="onpage($event)" (scroll)="onScroll($event.offsetY)">


<ngx-datatable-footer>
            <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-selectedCount="selectedCount"
                let-curPage="curPage" let-offset="offset" let-isVisible="isVisible">
                <div class="page-count" *ngIf="isPagination === true">
                </div>
                <div *ngIf="isPagination === true" class="d-flex justify-content-end pt-md-3 pt-lg-0" id="rowsPerPage">
                  <span class="pt-2 px-2">Rows per page:</span>  
                    <!-- <select [(ngModel)]="pageSize" (ngModelChange)="PageSizeChanged($event)" id="rowCount" [disabled]="filColLen">
                        <option *ngFor="let opt of limitOptions" [ngValue]="opt.value">{{opt.key}}</option>
                    </select> -->
                    <ng-select class="dropdwn-select"  appendTo="body" [(ngModel)]="pageSize" (ngModelChange)="PageSizeChanged($event)" id="rowCount" [clearable]="false" [searchable]="false"  [disabled]="filColLen">
                        <ng-option class="dropdown-options" *ngFor="let opt of limitOptions" [value]="opt.value" appIsEllipsisActive>{{opt.key}}</ng-option>
                    </ng-select>  
                    <span *ngIf="!filColLen">
                <datatable-pager [pagerLeftArrowIcon]="'datatable-icon-left'" 
                    [pagerRightArrowIcon]="'datatable-icon-right'" [pagerPreviousIcon]="'datatable-icon-prev'"
                    [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage" [size]="pageSize" [count]="rowCount"
                    [hidden]="!((rowCount / pageSize) > 1)" (change)="table.onFooterPage($event)" id="pageNum">
                </datatable-pager>
            </span>
            </div>
            </ng-template>
        </ngx-datatable-footer>

this is column im passing to datatable : this.logicChannelCols = [ { name: ‘Name’, prop: ‘name’, sortable: true, minWidth: 50, maxWidth: 5000, width: 100}, { name: ‘Status’, prop: ‘switchControl’, cellTemplate: this.switchcontrolT, sortable: false, minWidth: 50, maxWidth: 5000, width: 100 }, { prop: ‘colchooser’, name: ‘colchooser’, sortable: false, minWidth: 70, maxWidth: 70, width: 70, frozenRight: true, resizeable: false, canAutoResize: false }, ];

why horizontal scroll bar is always displayed !! if i set scrollbarV =true horizontal scroll will disappear the but the problem is page limit will not work in that case ,plz help me to solve this issue

thanks,