action button bug

[anguslui91]

When I click the buttons in the index view, the sorting of the action button is changed.

Beginning

Clicked

After run action

[charanguru]

I noticed this issue as well. I was able to "fix" it through some custom css. Each detached action should come with a dusk attribute. In my case these were my buttons

<button data-testid="import-action-configuration-publish" dusk="run-action-button-configuration-publish" title="Publish" class="btn btn-default ml-3 btn-detached-action btn-detached-index-action flex justify-center items-center bg-success text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="hero-upload" role="presentation" class="fill-current"><path d="M13 5.41V17a1 1 0 0 1-2 0V5.41l-3.3 3.3a1 1 0 0 1-1.4-1.42l5-5a1 1 0 0 1 1.4 0l5 5a1 1 0 1 1-1.4 1.42L13 5.4zM3 17a1 1 0 0 1 2 0v3h14v-3a1 1 0 0 1 2 0v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3z"></path></svg> <span>Publish</span></button>

<button data-testid="import-action-configuration-edit" dusk="run-action-button-configuration-edit" title="Edit" class="btn btn-default ml-3 btn-detached-action btn-detached-index-action flex justify-center items-center btn-primary"><!----> <span>Edit</span></button>

I imported custom css (location public/vendor/nova/nova_override.css) by adding the following to the boot() method of NovaServiceProvider

Nova::style('admin', public_path('vendor/nova/nova_override.css'));

And then in my css

button[dusk="run-action-button-configuration-publish"] {
    position: absolute !important;
    left: 80%;
}

button[dusk="run-action-button-configuration-edit"] {
    position: absolute !important;
    left: 92%;
}

[charanguru]

Disregard the CSS part above it doesn't work very well for different sized screens because of the position: absolute

I use this instead to set the order of buttons within a flex div

button[dusk="run-action-button-configuration-publish"] {
    order: 1 !important;
}

button[dusk="run-action-button-configuration-edit"] {
    order: 2 !important;
}

[anguslui91]

Disregard the CSS part above it doesn't work very well for different sized screens because of the position: absolute

I use this instead to set the order of buttons within a flex div

button[dusk="run-action-button-configuration-publish"] {
    order: 1 !important;
}

button[dusk="run-action-button-configuration-edit"] {
    order: 2 !important;
}

It's worked! Thanks a lot.