akveo / ngx-admin

Customizable admin dashboard template based on Angular 10+
https://akveo.github.io/ngx-admin/
MIT License
25.29k stars 7.96k forks source link

SmartTable Custom Action Problem for displaying Icons #5821

Open Whisper40 opened 3 years ago

Whisper40 commented 3 years ago

Issue type

I'm submitting a ... (check one with "x")

Issue description

Current behavior:

If you create custom action other than edit,remove,add. And if you add an icon, you will see that there is a problem of display. The icon is not in a row, but between rows.

Expected behavior: The icon has to be in a row

Steps to reproduce: Use smarttable, create custom action, add an icon to this action. Look the icon

image

actions: {
      add: false,
      edit: false,
      delete: false,
      columnTitle: "Actions",
      custom: [{ name: 'ourCustomAction', title: '<i class="ion-edit" title="YourAction"></i>' }],
      position: 'right',
    },     
    columns: {
      id: {
        title: 'ID',
        type: 'number',
        width: '7%'
      },
....
...

Other information:

Version : 2 Nov 2020

Whisper40 commented 3 years ago

If others need to solve it very fast : In style.scss

.nb-theme-default ng2-smart-table .ng2-smart-actions  {
  height: revert;
}
.nb-theme-dark ng2-smart-table .ng2-smart-actions  {
  height: revert;
}
.nb-theme-cosmic ng2-smart-table .ng2-smart-actions  {
  height: revert;
}
.nb-theme-corporate ng2-smart-table .ng2-smart-actions  {
  height: revert;
}

[EDIT] Other solution, choose one ! -> https://github.com/akveo/ng2-smart-table/issues/1197

Why ? image

A property with height: 1px; is causing the problem

Let me know if a good fix is found