Laravel Nova Metric card position

Welcome to Programming Tutorial official website. Today - we are going to cover how to solve / find the solution of this error Laravel Nova Metric card position on this date .

Is it possible to move the card below the block with detail?

explanation image


While Laravel Nova doesn’t allow this, you can use custom vanilla JavaScript to cut and paste it. It’s a bit hacky but it works 🤷‍♂️

This is all in the Card.vue that the artisan nova:card yourname/customcard command creates.

Give the card an id so we can find it later:

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

Then find it again:

let customCard = document.querySelector('#custom-card');

The listing of the details of that resource has a div with a custom dusk element and the value is set to resourcename-detail-component where resourcename is e.g. user. You need to find that element and then append the card snippet to it:

let anotherComponent = document.querySelector('div[dusk=resourcename-detail-component]');

I’ve written this up here: Laravel Nova: Move cards in Resource Detail View