Styles and text error when clicking on a Livewire button

I have an element, specifically a button with the text "Delete" and when I click on it the text to be shown is "Deleting", the problem is that it is a table and when I click on the button, the whole interface moves, I want to eliminate this behavior and I don't know how to do it.

This is my code:

<tbody>
                        @forelse($elementos_carrito as $item)
                            <tr wire:key="{{$item['producto_id']}}">
                                <td class="py-4">
                                    <div class="flex items-center">
                                        <img class="h-16 w-16 mr-4" src="{{isset($item['imagen']) ? url('storage', $item['imagen']) : asset('imagen/no-photo.jpg') }}" alt="{{$item['nombre']}}">
                                        <span class="font-semibold"></span>
                                    </div>
                                </td>
                                <td class="py-4">{{Number::currency($item['monto_unitario'],'LPS')}}</td>
                                <td class="py-4">
                                    <div class="flex items-center">
                                        <button wire:click="decrementarCantidad({{$item['producto_id']}})" class="border rounded-md py-2 px-4 mr-2">-</button>
                                        <span class="text-center w-8">{{$item['cantidad']}}</span>
                                        <button wire:click="incrementarCantidad({{$item['producto_id']}})" class="border rounded-md py-2 px-4 ml-2">+</button>
                                    </div>
                                </td>
                                <td class="py-4">{{Number::currency($item['monto_total'], 'lps')}}</td>
                                <td>
                                    <button wire:click="eliminarElemento({{$item['producto_id']}})" class="bg-slate-300 border-2 border-slate-400 rounded-lg px-3 py-1 hover:bg-red-500 hover:text-white hover:border-red-700">
                                        <span class="w-16 text-center" wire:loading.remove wire:target='eliminarElemento({{$item['producto_id']}})'>Eliminar</span>
                                        <span class="w-16 text-center" wire:target="eliminarElemento({{$item['producto_id']}})" wire:loading>Eliminando</span>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-4xl font-semibold text-sky-500"> No hay items en el carrito</td>
                            </tr>
                        @endforelse
                        <!-- More product rows -->
                        </tbody>

tykus

1 year ago

Level 104

The w-16 utility has not effect on the span element; it would be better moved to the button. Make sure the choice of width is appropriate for the maximum content length (the longest word). I am not sure the text-center utility is necessary either; that should be the default for a button

<button wire:click="eliminarElemento({{$item['producto_id']}})" class="w-16 bg-slate-300 border-2 border-slate-400 rounded-lg px-3 py-1 hover:bg-red-500 hover:text-white hover:border-red-700">
  <span wire:loading.remove wire:target='eliminarElemento({{$item['producto_id']}})'>Eliminar</span>
  <span wire:target="eliminarElemento({{$item['producto_id']}})" wire:loading>Eliminando</span>
</button>

Please or to participate in this conversation.