Custom actions with icons overlap

[Dazza666]

Hi All, I am having major issues getting custom actions to render, can someone please help?

I have set up my settings like so:

  settings = {
    actions:{
      add:false,
      edit:false,
      delete:false,
      custom: [
        {
          name: 'accept',
          title: '<i class="nb-checkmark inline-block width: 50px"></i>',
        },
        {
          name: 'deny',
          title: '<i class="nb-close inline-block width: 50px"></i>',
        },
      ],
    },
    columns: {
      mmsi: {
        title: 'MMSI',
        editable: false,
      },
      state: {
        title: 'State',
        editable: false,
      },
      vendor: {
        title: 'Vendor',
        editable: false,
      },
      userid: {
        title: 'UserId',
        editable: false,
      },
    },
  };
}

this produces:

I found on another issue that someone had added the following CSS to override the defaults:

:host ::ng-deep tr .ng2-smart-actions{ display: flex; }

:host ::ng-deep nbng2-st-tbody-custom {display: flex;}

:host ::ng-deep ng2-st-tbody-edit-delete a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-create-cancel a.ng2-smart-action {display: inline-block !important;}
:host ::ng-deep ng2-st-tbody-custom a.ng2-smart-action.ng2-smart-action-custom-custom {
    display: inline-block;
    width: 80px;
    text-align: center;
}

But this produces this output:

The buttons are not aligned, the actions border is messed up, and the other columns on the actions look like they are 1 pixel out.

Please, does anyone know how to resolve?

[Dazza666]

No one else has had this issue? I can't believe it! Please does anyone have any advice on how to resolve this?

[michabbb]

hi,

i had the same problem yesterday and i was able to fix it this way:

.order-table {

  thead th.ng2-smart-actions.ng-star-inserted {
    width: 1em;
  }

  td.ng2-smart-actions {
    float: left !important;

    ng2-st-tbody-custom {
      float: left;
      width: auto;
      display: flex;
      margin-top: 0.5em;

      a.ng2-smart-action.ng2-smart-action-custom-custom {
        margin-left: 0.5em;
      }
    }
  }
}

<ng2-smart-table class="order-table"
                                 [settings]="order_settings"
                                 [source]="order_source"
                                 (custom)="onCustomAction($event)">
                </ng2-smart-table>

only tested in chrome (i don´t care about other browsers, sorry)

[Whisper40]

@michabbb Thanks for your solution !

The same thing for the right side ( with a perfect display without border ;) )

.order-table {

  thead th.ng2-smart-actions.ng-star-inserted {
    width: 1em;
  }

  td.ng2-smart-actions {
    float: right !important;

    ng2-st-tbody-custom {
      float: right;
      width: auto;
      display: flex;
      margin-top: 0.5em;
      margin-left: 1em;

      a.ng2-smart-action.ng2-smart-action-custom-custom {
        margin-right: 0.5em;
      }
    }
  }
}

.nb-theme-default ng2-smart-table .ng2-smart-actions a.ng2-smart-action:not(:last-child){
  border-right: 0px;
}

[jupmorenor]

I've solved any issues with icons placement like this:

:host ::ng-deep {
    ng2-st-actions, ng2-st-tbody-edit-delete, ng2-st-tbody-create-cancel {
        display: flex;
        justify-content: space-evenly;
    }

    ng2-st-tbody-custom {
        display: flex;
        justify-content: space-around;
    }
}

You can replace ng-deep with table tbody tr td .... selector.

[marcmosco]

I've solved any issues with icons placement like this:

:host ::ng-deep {
    ng2-st-actions, ng2-st-tbody-edit-delete, ng2-st-tbody-create-cancel {
        display: flex;
        justify-content: space-evenly;
    }

    ng2-st-tbody-custom {
        display: flex;
        justify-content: space-around;
    }
}

You can replace ng-deep with table tbody tr td .... selector.

How can I replace ng-deep with 'table tbody tr td...'? It doesn't work

[Danielitouci96]

I have the same problem, some answer to this, the one from jupmorenorde I improve it, but it keeps staying like this...