Card only holds 4 buttons?

[zagi988]

Is this accidental or meant to be? I made 4 buttons for the card and when I want to make fifth, the 4 buttons move a bit to the left but 5th button doesn't show up.

My config:

type: custom:mini-humidifier
entity: fan.zhimi_rmb1_8d58_air_purifier
name: Zračko
toggle:
  default: 'on'
  hide: 'on'
power:
  type: button
  state:
    entity: fan.zhimi_rmb1_8d58_air_purifier
  entity: fan.zhimi_rmb1_8d58_air_purifier
  toggle_action: |
    (state, entity) => {
      const service = state === 'on' ? 'turn_off' : 'turn_on';
      return this.call_service('fan', service, { entity_id: entity.entity_id });
    }
indicators:
  filter_life:
    icon: mdi:air-filter
    unit: '% left'
    round: 1
    order: 1
    source:
      entity: sensor.zhimi_rmb1_8d58_filter_life_level
  fan_speed:
    icon: mdi:speedometer
    unit: RPM
    round: 1
    order: 2
    source:
      attribute: custom_service.moto_speed_rpm
buttons:
  mode:
    entity: fan.zhimi_rmb1_8d58_air_purifier
    icon: mdi:fan
    order: 1
    type: dropdown
    state:
      attribute: preset_mode
    source:
      Auto: Auto
      Sleep: Sleep
      Favorite: Custom
    active: (state, entity) => (entity.state !== 'off')
    change_action: |
      (selected, state, entity) => {
        const options = { entity_id: entity.entity_id, preset_mode: selected };
        return this.call_service('fan', 'set_preset_mode', options);
      }
  child_lock:
    type: button
    icon: mdi:shield-lock
    order: 3
    state:
      entity: switch.zhimi_rmb1_8d58_physical_control_locked
    entity: switch.zhimi_rmb1_8d58_physical_control_locked
    toggle_action: |
      (state, entity) => {
        const service = state === 'on' ? 'turn_off' : 'turn_on';
        return this.call_service('switch', service, { entity_id: entity.entity_id });
      }
  set_fan_speed:
    entity: fan.zhimi_rmb1_8d58_air_purifier
    icon: mdi:air-purifier
    order: 2
    type: dropdown
    state:
      attribute: custom_service.favorite_level
    source:
      '1': Lvl 1
      '2': Lvl 2
      '3': Lvl 3
      '4': Lvl 4
      '5': Lvl 5
      '6': Lvl 6
      '7': Lvl 7
      '8': Lvl 8
      '9': Lvl 9
      '10': Lvl 10
      '11': Lvl 11
      '12': Lvl 12
      '13': Lvl 13
      '14': Lvl 14
    active: (state, entity) => (entity.attributes.preset_mode == 'Favorite')
    disabled: (state, entity) => (entity.attributes.preset_mode !== 'Favorite')
    change_action: |
      (selected, state, entity) => {
        const service = { entity_id: entity.entity_id, field: "custom_service.favorite_level", value: parseInt(selected) };
        return this.call_service('xiaomi_miot', 'set_property', service);
      }
  beep:
    entity: fan.zhimi_rmb1_8d58_air_purifier
    type: dropdown
    icon: mdi:bell-ring
    order: 4
    state:
      attribute: alarm
    active: (state, entity) => (entity.attributes.alarm == true)
    source:
      'true': Beep ON
      'false': Beep OFF
    change_action: |
      (selected, state, entity) => {
        const service = { entity_id: entity.entity_id, field: "alarm", value: JSON.parse(selected) };
        return this.call_service('xiaomi_miot', 'set_property', service);
      }
  brightness:
    entity: fan.zhimi_rmb1_8d58_air_purifier
    type: dropdown
    icon: mdi:brightness-percent
    order: 5
    state:
      attribute: screen.brightness
    active: (state, entity) => (entity.attributes.screen.brightness !== "0")
    source:
      '0': 'Off'
      '1': Dim
      '2': Bright
    change_action: |
      (selected, state, entity) => {
        const service = { entity_id: entity.entity_id, field: "screen.brightness", value: parseInt(selected) };
        return this.call_service('xiaomi_miot', 'set_property', service);
      }

[regevbr]

Works for me with 6 buttons, debug your css and figure out why it hapens. I suggest also making sure that the last button is not displayed because its entity is unavaiable. Try to duplciate a button that you know gets showed multiple times to see if that is a real issue with css

[zagi988]

Found the problem...

entity.attributes.screen.brightness !== "0" had to be "entity.attributes.screen.brightness" !== "0"

[zagi988]

Actually just tested and that doesn't work. Even tho the state of entity.attributes.screen.brightness is 0, entity is active. Actually, whatever the state is - it says active. There seems to be a problem with parsing that additional dot in screen.brightness and somehow it doesn't listen to it's state.

[regevbr]

https://stackoverflow.com/questions/2577172/how-to-get-objects-value-if-its-name-contains-dots