Edit css display element for a dashboard

Configuration Frontend
1

Hey there,

i am using a custom dashboard with kios mode on an ipad. Every works fine, but at the top i am havin an empty space. I did some inspection in a browser and found that the css element “display: flex” (hui-view-container) is responsible for this empty space. So i thought i can use card_mod to change the css style for the dashboard like this:

kiosk_mode:
  user_settings:
    - users:
        - schreibtisch
      kiosk: true
      hide_overflow: true
      hide_header: true
views:
  - title: iPad Schreibtisch Display
    icon: mdi:television
    type: panel
...
...
card_mod:
  style: |
    hui-view {
      display: contents !important;    
      flex-direction: column;         
      height: 100%;                   
      margin: 0;                     
      padding: 0;                     
    }

But this seems not to work.
Is there a way change the css display element from flex to contents für the hui-view-container?

2

card-mod doesn’t have any effect there. You need to use a card-mod template targeting the root element.

your-theme:
  card-mod-theme: your-theme
  card-mod-root-yaml: |
    .: |
      hui-view-container {
        ...
      }
      hui-view {
        ...
      }
3

Thank you. I guess i am still missing something, because the view does not change.

title: iPad Schreibtisch Display
icon: mdi:television
type: panel
theme: noctis
noctis:
  card-mod-theme: noctis
  card-mod-root-yaml: |
    .: |
      hui-view {
        display: contents !important;    
        flex-direction: none;         
        height: 50%;                   
        margin: 0;                     
        padding: 0;
      }
cards:

....
4

The theme must be defined in a theme file, not inside a card.