custom action bug

[leticiafatimaa]

I'm trying to add a button to custom action, but a new column is not added in the action, making the button overlap with the others.

settings = {
    actions: {
      custom: [
        {
          name: 'Button',
          title: 'Button ',
        }
      ],
    },
    columns: {
      name: {
        title: 'Full name'
      },
      email: {
        title: 'Email'
      },
      lastLogin: {
        title: 'Last Login'
      }
    }
  };

[karthikkavin]

Hi! I got same issue... How we fix?

[kvimalkr55]

same issue how to fix it

[katan]

Try to set false the add, edit & delete properties on actions.

Here an example: (The image result below, with actions & template custom)

columns: {
        ImageURL: {
            title: 'image',
            type: 'html'
        },
        name: {
            title: 'Environment'
        },
        select: {
            title: '',
            type: 'custom',
            renderComponent: SelectEnvironmentComponent,
            onComponentInitFunction(instance) {
                instance.select.subscribe(
                    environment => instance.selectEnvironment(environment)
                );
            }
        }
    },
    mode: 'external',    // Use external functions to Edit/Delete, etc.
    hideSubHeader: true, // Don't show the Add row
    actions: {
        add: false,
        edit: false,
        delete: false,
        custom: [
            {
                name: 'edit',
                title: '<i class="material-icons inline-block">edit</i>'
            },
            {
                name: 'delete',
                title: '<i class="material-icons text-danger">delete</i>'
            },
            {
                name: 'Button',
                title: 'Test!'
            }
        ]
    }

[NicolasKritter]

Got a fix in my global scss file

tr .ng2-smart-actions{ display: flex; }
ng2-st-tbody-custom {display: flex;}

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

In the screenshot, all icons are custom action adn all text button are the native edt/delete you can play with the withd and text-align

[HenriquePT]

Got a fix in my global scss file

tr .ng2-smart-actions{ display: flex; }
ng2-st-tbody-custom {display: flex;}

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

In the screenshot, all icons are custom action adn all text button are the native edt/delete you can play with the withd and text-align

This fix worked for me. Thanks @NicolasKritter