Formatting errors in browser-mod popup card

Configuration Frontend
1

I’m unsure if this is a bug in Browser_mod, the Apex cards or if i’m missing anything obvious.

I’m trying to add a a apexcharts card to a browser_mod popup, but when i do the formatting of the chart get “un alligened”

The result should look like this, which it does if i just create the card outside of browser_mod:popup-card

image
image518×654 22.2 KB

Note the text on pricing in the blue, orange and yellow boxes.

So far so good, but if i add the same into a pop-up card, the result is as follows:

image
image555×535 21.9 KB

The code used is pasted in here

  - theme: Backend-selected
    title: Test
    path: test
    badges: []
    cards:
      - title: Overblik
        type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: vertical-stack
                cards:
                  - type: entity
                    entity: sensor.elpriser_inkl_afgifter
      - type: custom:popup-card
        entity: sensor.elpriser_inkl_afgifter
        dismissable: true
        card:
          type: vertical-stack
          cards:
            - type: vertical-stack
              cards:
                - type: markdown
                  content: '## Strømpriser'
            - type: custom:apexcharts-card
              apex_config:
                chart:
                  height: 350px
              all_series_config:
                unit: ' kr.'
              experimental:
                color_threshold: true
              header:
                title: Elpriser pr. time (kr/kWh)
                show: true
                standard_format: true
                show_states: false
                colorize_states: true
              now:
                show: true
                label: Now
              graph_span: 25h
              span:
                start: day
                offset: '-0h'
              yaxis:
                - min: 0
                  apex_config:
                    tickAmount: 5
              series:
                - entity: sensor.elpriser_inkl_afgifter
                  type: column
                  name: Inkl. afgifter
                  data_generator: >
                    var today = entity.attributes.raw_today.map((start, index)
                    => {
                      return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
                    });

                    if (entity.attributes.tomorrow_valid) {
                      var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
                        return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
                      });

                      var data = today.concat(tomorrow);
                    } else {
                      var data = today
                    }

                    return data;
                  float_precision: 2
                  color_threshold:
                    - value: 0
                      color: green
                    - value: 2
                      color: orange
                    - value: 3.5
                      color: red
                    - value: 5
                      color: darkred
                  show:
                    extremas: time
                    legend_value: false
                - entity: sensor.elpriser_excl_afgifter
                  name: Excl. afgifter
                  type: line
                  color: 03a9f4
                  stroke_width: 4
                  float_precision: 2
                  extend_to: false
                  show:
                    extremas: true
                    legend_value: false
                  data_generator: >
                    var today = entity.attributes.raw_today.map((start, index)
                    => {
                      return [new Date(start["hour"]).getTime(), entity.attributes.raw_today[index]["price"]];
                    });

                    if (entity.attributes.tomorrow_valid) {
                      var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
                        return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
                      });

                      var data = today.concat(tomorrow);
                    } else {
                      var data = today
                    }

                    return data;

I have tried searching for a solution, and from what i can understand there have been some issues with formatting in browser_mod, but my understanding is that these should be fixed.

Any suggestions or alternative way to archieve the popup that supports the formatting?

2

I’m also having a similar issue and hope we can get some visibility on this. I’m not too familiar with javascript, but I think (outside the problem) this is formatted correctly.

I’m calling the popup with:

          - <<: *light_button_with_slider
            name: Basement
            entity: light.basement_lights_no_strip
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data: !include popups.yaml

Then the problem I have comes from content: state: styles: background. No color is showing up, or whatever the default is (clear or black; there’s nothing behind it so I’m not sure).

popups.yaml:

title: 'Basement Lights'
content:
  type: custom:button-card
  name: Main
  icon: mdi:floor-lamp-torchiere
  entity: light.basement_upper_lights
  tap_action:
    action: toggle
    haptic: medium
  hold_action:
    action: more-info
    haptic: medium
  state:
    - value: 'on'
      styles:
        card:
          - background: |
              var rgb = states['light.basement_upper_lights'].attributes.rgb_color;
              if (rgb) {
                return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
              } else {
                return 'rgb(255, 218, 120)';  # Default yellow color if RGB attribute is missing
              }
        icon:
          - color: '#000000'
        name:
          - color: '#000000'
    - value: 'off'
      styles:
        icon:
          - color: '#FFFFFF'
        name:
          - color: '#FFFFFF'

The icon and name color works, but it seems to be an option baked into browser-mod. I’ve been trying to work around this for a few hours now and I’m just stuck at a brick wall.

With regard to your popup, @martinta89 , this is my first attempt working with popup cards, but when reading the documentation I saw that fire-dom-event is the preferred and more flexible way to use popups. I don’t think this is going to help with your specific problem, but it might be a starting point.