Custom:button-card full width

Configuration Frontend
1 
type: custom:button-card
name: Battery & Fuel Bar
unsafe_html: true
show_icon: false
show_name: false
show_state: false
tap_action:
  action: none
styles:
  card:
    - height: 30px
    - width: 100%
    - padding: 0
    - background: none
    - box-shadow: none
custom_fields:
  bar: |
    [[[
      const batteryRaw = parseFloat(states['sensor.volvo_xc60_battery_charge_level']?.state) || 0;
      const fuelRaw = parseFloat(states['sensor.volvo_fuel_percentage']?.state) || 0;

      const battery = 13 / 100 * batteryRaw;
      const fuel = 87 / 100 * fuelRaw;
      const empty = Math.max(0, 100 - battery - fuel);

      return `
        <div style="
          display: flex;
          height: 18px;
          width: 100%;
          border-radius: 12px;
          overflow: hidden;
          background: #444;
          margin-top: 6px;
        ">
          <div title="Battery: ${batteryRaw.toFixed(1)}%" style="
            background-color: #3B82F6;
            flex: ${battery};
          "></div>
          <div title="Fuel: ${fuelRaw.toFixed(1)}%" style="
            background-color: #EF4444;
            flex: ${fuel};
          "></div>
          <div title="Empty: ${(empty).toFixed(1)}%" style="
            background-color: #D1D5DB;
            flex: ${empty};
          "></div>
        </div>
      `;
    ]]]
custom_fields_styles:
  bar:
    - width: 100%

it only spans the size of the text and not the width of the widget, can someone help with this

image
image515×132 1.73 KB

2

It should be

    styles:
          custom_fields:
              bar:
                 - width: xxxx
          card:
              - height: xxxx
3

image
image380×118 2.57 KB

Perfect Thanks

type: custom:button-card
name: Volvo Status
aspect_ratio: 4/1
show_icon: false
show_name: false
show_state: false
unsafe_html: true
styles:
  card:
    - background-color: "#1c1c1c"
    - border-radius: 12px
    - padding: 10px
    - color: white
    - font-size: 14px
    - text-align: left
    - text-shadow: 0px 0px 2px black
  grid:
    - grid-template-areas: "\"bar\" \"info\" \"warnings\""
    - grid-template-columns: 1fr
    - grid-template-rows: auto auto auto
  custom_fields:
    bar:
      - width: 100%
    info:
      - padding-top: 6px
      - white-space: normal
    warnings:
      - padding-top: 6px
      - white-space: normal
      - color: orange
custom_fields:
  bar: |
    [[[
      const batteryRaw = parseFloat(states['sensor.volvo_xc60_battery_charge_level']?.state || 0);
      const fuelRaw = parseFloat(states['sensor.volvo_fuel_percentage']?.state || 0);
      const battery = 13 / 100 * batteryRaw;
      const fuel = 87 / 100 * fuelRaw;
      const empty = Math.max(0, 100 - battery - fuel);

      return `
        <div style="
          display: flex;
          width: 100%;
          height: 18px;
          border-radius: 12px;
          overflow: hidden;
          background: #444;
        ">
          <div title="Battery: ${batteryRaw.toFixed(1)}%" style="width: ${battery}%; background-color: #3B82F6;"></div>
          <div title="Fuel: ${fuelRaw.toFixed(1)}%" style="width: ${fuel}%; background-color: #EF4444;"></div>
          <div title="Empty: ${(empty).toFixed(1)}%" style="width: ${empty}%; background-color: #D1D5DB;"></div>
        </div>
      `;
    ]]]
  info: |
    [[[
      const rawbattery = states['sensor.volvo_xc60_battery_charge_level']?.state || '0';
      const rawfuel = states['sensor.volvo_fuel_percentage']?.state || '0';
      const dist_batt = parseFloat(states['sensor.volvo_distance_to_empty_battery_mi']?.state || 0);
      const dist_fuel = parseFloat(states['sensor.volvo_distance_to_empty_tank_mi']?.state || 0);
      const total_miles = (dist_batt + dist_fuel).toFixed(1);

      return `🔋 Battery: ${rawbattery}% ⛽ Fuel: ${rawfuel}% 🚘 Range: ${total_miles} mi`;
    ]]]
  warnings: |
    [[[
      const sensors = [
        { id: 'sensor.volvo_xc60_coolant_level_warning', label: 'Coolant Level' },
        { id: 'sensor.volvo_xc60_washer_fluid_level_warning', label: 'Washer Fluid' },
        { id: 'sensor.volvo_xc60_oil_level_warning', label: 'Oil Level' },
        { id: 'sensor.volvo_xc60_door_front_left', label: 'Front Left Door' },
        { id: 'sensor.volvo_xc60_door_front_right', label: 'Front Right Door' },
        { id: 'sensor.volvo_xc60_door_rear_left', label: 'Rear Left Door' },
        { id: 'sensor.volvo_xc60_door_rear_right', label: 'Rear Right Door' },
        { id: 'sensor.volvo_xc60_hood', label: 'Hood' },
        { id: 'sensor.volvo_xc60_sunroof', label: 'Sunroof' },
        { id: 'sensor.volvo_xc60_tailgate', label: 'Tailgate' }
      ];

      const chargingTime = parseFloat(states['sensor.volvo_xc60_estimated_charging_time']?.state || 0);
      const availability = states['sensor.volvo_xc60_availability']?.state;
      let messages = [];

      sensors.forEach(s => {
        const state = states[s.id]?.state;
        if (state && state !== 'OK' && state !== 'Closed' && state !== 'Unavailable') {
          messages.push(`⚠️ ${s.label}: ${state}`);
        }
      });

      if (availability === 'Unavailable') {
        messages.push('❌ Vehicle is unavailable');
      }

      if (chargingTime > 0) {
        messages.push(`🔌 Charging time remaining: ${chargingTime} hrs`);
      }

      return messages.length > 0 ? messages.join('<br>') : '';
    ]]]
4

Please consider marking my post above with the Solution tag. It will automatically place a check-mark next to the topic’s title which signals to other users that this topic has been resolved.

This helps users find answers to similar questions.

image