akveo / ngx-admin

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

Miss oriented custom actions while using ng2-smart-table with nebular themes #2063

Open bnap00 opened 5 years ago

bnap00 commented 5 years ago

Issue type

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

Issue description

Current behavior:

While using custom actions ng2-smart-table with the nebular theme. Screenshot 2019-03-13 at 1 53 34 PM the actions become missoriented.

Expected behavior:

Screenshot 2019-03-13 at 1 36 09 PM Properly oriented actions, just as vanilla installation of ng2-smart-table

Steps to reproduce:

just add custom actions to settings of ng2-smart-table

settings = {
    actions: {
      add: false,
      edit: false,
      delete: false,
      custom: [
        {
          name: 'customEdit',
          title: 'CEdit ',
        },
      ]
    },
  }

Other information:

npm, node, OS, Browser

<!--
Node, npm: `v9.10.1` and `5.6.0`
OS: macOS Mojave
Browser: Chrome and safari, haven't tested on others
-->

Angular, Nebular, ng2-smart-table

bnap00 commented 5 years ago

any updates? this is also a problem with new version of ngx-admin

kc187 commented 5 years ago

had the same issue, all browsers EXCEPT firefox had this issue, fixed it with following css :

:host /deep/ ng2-st-tbody-edit-delete {
    height: 1px !important;
}

:host /deep/ ng2-st-tbody-custom a {
    height: 1px !important;
}
bnap00 commented 5 years ago

@kc187 This solution looks good for one custom action, But could not get it working for more that one, Thanks for the tip though

bnap00 commented 5 years ago

also :host /deep/ is deprecated

tsarapin commented 3 years ago

had the same issue, all browsers EXCEPT firefox had this issue, fixed it with following css :

:host /deep/ ng2-st-tbody-edit-delete {
    height: 1px !important;
}

:host /deep/ ng2-st-tbody-custom a {
    height: 1px !important;
}

This should work:

::ng-deep ng2-st-tbody-edit-delete { height: 1px !important; display: inline !important; }

::ng-deep ng2-st-tbody-custom a {
    height: 1px !important;
    display: inline !important;
}