Dropdown elements such as ngx-dropdown are hidden with overflow

[ScottSpittle]

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 Have a dropdown / ngx-dropdown in a data cell

Expected behavior Dropdown should work

Reproduction of the problem use the following code

<ngx-dropdown>
                <ngx-dropdown-toggle>
                    <button class="btn btn-default">
                        test
                    </button>
                </ngx-dropdown-toggle>
                <ngx-dropdown-menu>
                    <ul class="vertical-list">
                        <li> test </li>
                        <li> test </li>
                    </ul>
                </ngx-dropdown-menu>
            </ngx-dropdown>

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

Please tell us about your environment:

• Table version: 0.8.x

• Angular version: 2.0.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[lmedeiros]

Try adding this css style

.datatable-body-cell { overflow-x: visible !important; }

It worked for me with a bootstrap dropdown inside a cell

[chanm003]

This CSS fix works for me:

.ngx-datatable {
    overflow: visible;
}

But above fix ceases to work when I set:

<ngx-datatable [scrollbarH]="true">

To address that issue I attempted to apply a second CSS fix:

.ngx-datatable.scroll-horz .datatable-body {
   overflow-x: visible;
}

While the second CSS fix meets the objective of the dropdown not being truncated, it breaks the scrolling because the rows are overflowing wider than the "table".

Can anyone get this to work in conjunction with [scrollbarH]="true"?

[chanm003]

Actually even my initial CSS fix introduces a separate issue. Allowing overflow to be visible, will cause the table row to be wider than the table on smaller screens.

Anybody have a solution? Seems like #959 suggests creating your own.

[alainbelez]

tried @lmedeiros solution and it partially fixed the problem.

is there a correct fix for this yet?

[caugello]

I've solved my issue with:

.datatable-body-cell {
  overflow-y: visible !important;
  overflow-x: visible !important;
}

 .ngx-datatable {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

[vgudzhev]

@kartouch I am applying your fix but now the the cells content overlaps. Do you know how can I handle this ?

[davidoween]

I have the same problem.

[HomoEfficio]

The same problem in ngx-datatable 3.1.3. I tried @lmedeiros solution, but it did not work because the <style> of ngx-datatable always went under my custom <style> and overrode my css contents.

So I modified the DOM directly in the ngAfterViewInit() hook like below:

<ngx-datatable-column name="good" cellClass="overflow-visible">
...
</ngx-datatable-column>

  public ngAfterViewInit() {
    this.cellOverflowVisible();
  }

  private cellOverflowVisible() {
    const cells = document.getElementsByClassName('datatable-body-cell overflow-visible');
    for (let i = 0, len = cells.length; i < len; i++) {
      cells[i].setAttribute('style', 'overflow: visible !important');
    }
  }

I don't think it is a good idea to handle DOM directly, but I could not find any other answer.

[B-PRAVEEN]

Put the below Scss Code in Global. .datatable-body-cell { overflow: visible !important; } .datatable-header-cell, .datatable-header { overflow:visible !important; }

[goldel777]

For Chrome, (doesn't work on IE), set the data-container='body'

[waleedalward]

I've solved my issue with:

.datatable-body-cell {
  overflow-y: visible !important;
  overflow-x: visible !important;
}

 .ngx-datatable {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

thanks kartouch this works fine

[brognilucas]

None of this solutions worked with property [frozenRight]="true"