7

There is a ->width() option for cards. How can the height be defined?

ohho
  • 50,879
  • 75
  • 256
  • 383

3 Answers3

2

Although Nova does not provide a ->height() method, when you generate a Nova card it creates resources/js/components/Card.vue automatically (see Nova card documentation)

The Card.vue file allows you to modify the Vue template for the card element. Since Nova uses the Tailwind CSS framework, you should be able to use the Height classes of Tailwind CSS inside Card.vue.

Dan Bowling
  • 1,205
  • 1
  • 15
  • 41
2

As of now you can only adjust the width of the Card from the Card's php file using the ->width() method.

When you set the card width to 1/2 contents from the card seems to overflow. I solved the issue by adding the class h-auto to the <card> inside the Card.vue.

Fawzan
  • 4,738
  • 8
  • 41
  • 85
0

I solved this by adding this to my nova theme:

.card-panel {
    height: auto !important;
    min-height: 150px;
}

Solution originally posted here:

https://github.com/laravel/nova-issues/issues/1014#issuecomment-451355417

Citizen
  • 12,430
  • 26
  • 76
  • 117