Posistions not working

[aroe0546]

I have a strange problem: I want to use the bar card in a custom button card, but when I want to use the card it ignores the positions formatting.
If I only use the bar card in a blank card, it is fine
I've been struggling for 2 days now but I can't get it done

type: custom:button-card
name: Woonkamer
icon: mdi:sofa
entity: sensor.tstat_156684_current_temperature
show_state: true
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style: |
    ha-card {
     –ha-card-box-shadow: none;
     background-color: rgba(255, 255, 255, 0.8);
     border-radius: 15px;
    }
custom_fields:
  btn:
    card:
      type: custom:bar-card
      entities:
        - entity: sensor.verbruik_net_vandaag
      name: hello
      min: "0"
      max: "30"
      color: yellow
      positions:
        icon: "off"
        indicator: "off"
        name: "off"
        value: "off"
      card_mod:
        style: |
          ha-card {
            border: none;
          }
styles:
  grid:
    - grid-template-areas: "\" . . n\"  \" . . s\"  \"btn btn btn\""
    - grid-template-columns: 1fr 1fr 1fr
    - grid-template-rows: min-content 1.1fr 1fr
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 100px
    - height: 100px
    - left: 0
    - bottom: 0
    - margin: 0 0 -10px -10px
    - background: rgba(174,22,65,255)
    - border-radius: 200px
  icon:
    - width: 60px
    - color: white
    - margin: 0px 0px 0px 20px
  card:
    - padding: 15px 15px 15px 15px
    - height: 120px
  custom_fields:
    btn:
      - align-self: end
      - margin: 0px 0px 0px 0px
      - height: 50px
  name:
    - justify-self: end
    - align-self: start
    - font-size: 18px
    - font-weight: 500
    - color: black
  state:
    - min-heigt: 80px
    - justify-self: end
    - align-self: start
    - font-size: 14px
    - font-weight: 500
    - opacity: "0.7"

[ildar170975]

Reporting an issue in a code containing other custom cards is not the best way.
Suggest to MINIMIZE the code & then ask in Community first.

[danielbrunt57]

Have you tried CSS styling within the bar card?

style: |-
  .contentbar-direction-right {
   flex-direction: column;
  }
  .min-direction-right {
    margin: 0px;
    margin-left: 4px;
    margin-right: auto;
    margin-bottom: -20px;
    bottom: 10px;
  }
    bar-card-value {
    margin: 0px;
  }
  bar-card-name {
    margin: 0px;
  }
  bar-card-max {
    margin: 0px;
    margin-left: auto;
    margin-top: -20px;
    top: 10px;
  }
  bar-card-divider {
    display: none;
  }
title: Custom CSS Layout
type: 'custom:bar-card'