Laravel Nova: Move cards in Resource Detail View

Posted on 3. August 2021 Comments

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
    <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) {
            } else {
                console.error('Could not find another resourcename detail component')


  1. Laravel Nova Metric card position - Programming Tutorial
  2. Laravel Nova Metric card position

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.