Mushroon chips card with custom layout card

Configuration Frontend
1

I am trying to make a card for my Itho CVE,
I have four sensors which i created a mushroom chips card for.
I want to place this data in the upper right corner.
I use the custom layout card to make a grid to position the sensors in the upper right corner.
If i use a mushroom chips card i can not assign a grid position to this entity, it stays in the upper right corner,if i use a mushroom entity card i can assign a grid position,however it is too large, and i like the size of the mushroom chip card.

i made a sample card to test before i implement it in my final card, below is the code:
I would apreciate the help with this problem,thanks in advance.

type: custom:stack-in-card
cards:

  • type: custom:layout-card
    layout_type: grid
    layout:
    grid-template-columns: 25% 25% 25% 25%
    grid-template-rows: 4
    grid-template-areas: |
    “zone1 zone2 zone3 zone4”
    “zone5 zone6 zone7 zone8”
    badges: []
    cards:
    • type: custom:mushroom-entity-card
      entity: sensor.ithocve_temperature
      primary_info: none
      layout: vertical
      icon: mdi:temperature-celsius
      card_mod:
      style: |
      mushroom-shape-icon {
      –shape-color: transparent !important;
      –shape-color-disabled: transparent !important;
      –icon-size: 40px;
      }
      tap_action:
      action: none
      view_layout:
      grid-area: zone8
    • type: custom:mushroom-chips-card
      chips:
      • type: template
        entity: sensor.itho_co2
        icon: mdi:molecule-co2
        content: ‘{{ states(entity) }} ppm’
        tap_action:
        action: none
        view_layout:
        grid-area: zone4

you can see in the bottom part that even if i assigned zone4 to the mushroom chip card it stays in the upper right corner.

2

Hi DJerike, If you want help please format your code (Look at 11):

3 
type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 25% 25% 25% 25%
      grid-template-rows: 4
      grid-template-areas: |
        "zone1 zone2 zone3 zone4"
        "zone5 zone6 zone7 zone8"
    badges: []
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.ithocve_temperature
        primary_info: none
        layout: vertical
        icon: mdi:temperature-celsius
        card_mod:
          style: |
            mushroom-shape-icon {
              --shape-color: transparent !important;
              --shape-color-disabled: transparent !important;
              --icon-size: 40px;
            }
        tap_action:
          action: none
        view_layout:
          grid-area: zone8
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.itho_co2
            icon: mdi:molecule-co2
            content: '{{ states(entity) }} ppm'
            tap_action:
              action: none
            view_layout:
              grid-area: zone4
4

test

5

Well it seems to me it’s in the upper left corner ! ?, anyhow, have you tried moving

view_layout:
              grid-area: zone4

In-line with

6

yes i have tried moving it but it does not work.
If i change the mushroom chips code so it is a mushroom template card ,it displays in the correct zone, that is zone4 like it states in the code.
But with the mushroom chips card in the code it states that it should be in the upper right corner (zone4), but it stayes in the upper left corner(zone1)
even if you input so it has to be in another area of the grid it does not work.

7

You misunderstand, i mend your “intends” are wrong !
It should be like this

      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.itho_co2
            icon: mdi:molecule-co2
            content: '{{ states(entity) }} ppm'
            tap_action:
              action: none
        view_layout:
          grid-area: zone4
1 Like
8

@boheme61

thanks, I tried again and it works perfect, that saved me a lot of time.