repats blog

Laravel Nova currently (v.3.27.0) doesn’t allow for custom cards to be moved to a different position in the resource detail page. Cards and Metrics appear always on top of the resources details.

However, while a bit dirty, a solution can be to let it load that way and then use Javascript to cut and paste the div somewhere else like so:

1. Give the card an id

<template>
    <card class="flex flex-col justify-center" id="custom-card">

2. Use vanilla JS to move it underneath the first div with the name of the resource + detail-component for the dusk attribute

let customCard = document.querySelector('#custom-card');
        if(customCard) {
            let anotherComponent = document.querySelector('div[dusk=resourcename-detail-component]');
            if(anotherComponent) {
                anotherComponent.appendChild(customCard);
            } else {
                console.error('Could not find another resourcename detail component')
            }
        }