Dropdown Issue In Table

Hello Team,

I have the Metronic Template which I am using to create a Angular Based Project so in that I am stuck in the designing issue in Dropdown in table.

In Table the data is rendering dynamically and in that one last column have button and after clicking that button the dropdown opens so basically as per design perspective the dropdown should display outer of the table neither in the table/

So not needed the vertical scrollbar for the dropdown, I have tried with many ways but didn't get the proper solution so can you please help me with that

Here is the Screen Shot.

- Not needed the vertical Scrollbar, Just needed the dropdown to open outer side of the
table

- When I am using the overflow: visible; in the table then the dropdown perfectly open outer of the table but because of the overflow: visible; the horizontal scrollbar not working and because of that the table responsive issue occurs.

So let me know the best solution for it as its code from the Paid Metronic Template.

Text formatting options
Submit

Replies (5)

Hi,

Sorry for the delay. May I know which Datatable are you using for Angular? At the moment, we do not have the example of Datatable in Angular.

Thanks

Hello,

The Datatable are from Metronic Template just I have customize the datatable and in that have added the Dropdown button.

Hi,

Sorry for the delay. Please check this example as a workaround. The dropdown open overflow outside of the datatable.

https://codepen.io/qpqinc/pen/yLyPVMJ

Thanks

Hello,

Have tried the given reference but it isn't working, So let me know any other solution, We are stuck here brother needed solution ASAP!

If you want then we can provide our code example also. JSK

Hi,

In our HTML version, the dropdown is working. Please check the demo here;

https://preview.keenthemes.com/metronic8/demo1/documentation/general/datatables/server-side.html

https://ibb.co/CWMysRp

Could you please get the sample code from the HTML version?

Thanks

Text formatting options
Submit
Text formatting options
Submit