Text has a black background since 1.4.1 (when lovelace card is transparent)

[Waylikemark]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue: 1.4.1

Last working release (if known): 1.4.0

Browser and Operating System: iOS compagnon app 2021.11.1 & Safari on iOS 15.2

Description of problem: When using text divider row 1.4.1 WITH the ios dark mode theme the text gets a black background, the same as subtitles have. Tried different theme’s like ios themes - dark mode and light mode, UX Goodie Theme an Transparent blue and all got the same result. It looks like when a lovelace card is set to transparent the text gets the background.

Javascript errors shown in the web inspector (if applicable):

Additional information:

[Gaute2000]

I experience the same problem.

[tbrausch]

Same here

[jeremybreeschoten]

Same here

[JeroenDeckers]

Same issue here

[philder]

Also here

[chinyaolin]

same issue
works fine on 1.4.0

[titiviking]

Same here.

Improvement suggestion to work with :before & :after instead of raised border: #23

[floodwayprintco]

Yep, same issue here.

Is a fix coming? Or is there a setting I need to add to restore it to the original function?

[dbloom86]

Any news on this issue?

[paulo1er]

Same issue here

I fix it with this hacs : https://github.com/thomasloven/lovelace-card-mod

style: |
  h2:before, h2:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: var(--line-size);
    content: '\a0';
    background-color: var(--divider-color);
  }

  h2:before {
    margin-left: -50%;
    text-align: right;
  }
  h2.text-divider {
    border-bottom: none;
  }

  h2.text-divider span {
    background: none;
  }

[dbloom86]

@paulo1er unfortunately this doesn't work for me. Maybe because I have it inside an entities card?
This is my card config:

`entities:

• type: custom:text-divider-row
  text: Afvalwijzer

• card_type: markdown
  content: >
  <ha-icon icon= {{'mdi:delete-alert' if
  states('sensor.circulus_afval_vandaag') != 'Geen' else
  'mdi:delete-outline'}}> Vandaag,
  {{states('sensor.simple_date')}}: <font color = {% if
  states('sensor.circulus_afval_vandaag') == 'pmd' %}'#ff944d'
  {% elif states('sensor.circulus_afval_vandaag') == 'gft' %}'#00e64d'
  {% elif states('sensor.circulus_afval_vandaag') == 'papier' %}'#3399ff'
  {% else %}'grey'
  {% endif %}> {{states('sensor.circulus_afval_vandaag')}}

  <ha-icon icon= {{'mdi:delete-alert' if
  states('sensor.circulus_afval_morgen') != 'Geen' else
  'mdi:delete-outline'}}> Morgen,
  {{states('sensor.simple_tomorrow')}}: <font color = {% if
  states('sensor.circulus_afval_morgen') == 'pmd' %}'#ff944d'
  {% elif states('sensor.circulus_afval_morgen') == 'gft' %}'#00e64d'
  {% elif states('sensor.circulus_afval_morgen') == 'papier' %}'#3399ff'
  {% else %}'grey'
  {% endif %}> {{states('sensor.circulus_afval_morgen')}}
  style: |
  h2:before, h2:after {
  position: absolute;
  top: 51%;
  overflow: hidden;
  width: 50%;
  height: var(--line-size);
  content: '\a0';
  background-color: var(--divider-color);
  }

  h2:before {
  margin-left: -50%;
  text-align: right;
  }
  h2.text-divider {
  border-bottom: none;
  }

  h2.text-divider span {
  background: none;
  }
  ha-card {
  box-shadow: none;
  border-radius: 10px;
  background: none;
  }
  type: custom:hui-element

• type: divider

• card: null
  card_type: glance
  entities:

  • entity: sensor.circulus_afval_gft
    name: GFT
  • entity: sensor.circulus_afval_papier
    name: Papier
  • entity: sensor.circulus_afval_pmd
    name: PMD
    style: |
    ha-card {
    box-shadow: none;
    border-radius: 10px;
    background: none;
    }
    type: custom:hui-element
    style:
    .: |
    #states > * {
    margin: 2px 0px !important;
    }
    ha-card {
    border: solid 2px var(--primary-color);
    background-color: var(--ha-card-background);
    }
    type: entities
    `

And it shows like this:

[paulo1er]

@dbloom86 I think you put the syle not in the right place

try something like this :

type: entities
entities:
  - type: custom:text-divider-row
    text: Afvalwijzer
    style: |
      h2:before, h2:after {
          position: absolute;
          top: 51%;
          overflow: hidden;
          width: 50%;
          height: var(--line-size);
          content: '\a0';
          background-color: var(--divider-color);
      }
      h2:before {
          margin-left: -50%;
          text-align: right;
      }
      h2.text-divider {
          border-bottom: none;
      }
      h2.text-divider span {
          background: none;
      }
      ha-card {
          box-shadow: none;
          border-radius: 10px;
          background: none;
      }
  - card_type: markdown
    content: >
      <ha-icon icon= {{'mdi:delete-alert' if
      states('sensor.circulus_afval_vandaag') != 'Geen' else
      'mdi:delete-outline'}}> Vandaag, {{states('sensor.simple_date')}}: <font
      color = {% if states('sensor.circulus_afval_vandaag') == 'pmd' %}'#ff944d'
      {% elif states('sensor.circulus_afval_vandaag') == 'gft' %}'#00e64d' {%
      elif states('sensor.circulus_afval_vandaag') == 'papier' %}'#3399ff' {%
      else %}'grey' {% endif %}> {{states('sensor.circulus_afval_vandaag')}}

      <ha-icon icon= {{'mdi:delete-alert' if
      states('sensor.circulus_afval_morgen') != 'Geen' else
      'mdi:delete-outline'}}> Morgen, {{states('sensor.simple_tomorrow')}}:
      <font color = {% if states('sensor.circulus_afval_morgen') == 'pmd'
      %}'#ff944d' {% elif states('sensor.circulus_afval_morgen') == 'gft'
      %}'#00e64d' {% elif states('sensor.circulus_afval_morgen') == 'papier'
      %}'#3399ff' {% else %}'grey' {% endif %}>
      {{states('sensor.circulus_afval_morgen')}}
    type: custom:hui-element
  - type: divider
   ...

PS : if you want to post code block you can use ``` quoting-code :)

[dbloom86]

@paulo1er You are absolutely right! Thanks a million! It works like a charm!
Sorry about the code block, I thought I used quotes, but I used the single ones xD

[mxwi]

I have the same problem. Would be happy for a fix!

[vahaldor]

Folks, does it still work you? The code you posted does not influence ha-card. I am trying to edit the .js and hardcode my background color that also does not work for me as there are still some inherited properties.

I would buy a coffee to the author s/he should correct this bug...

[dl-84]

I have the same problem. A rollback to version 1.4.0 works better for me because the background is transparent again, but so I miss the alignment options of version 1.4.1. :-(((

Is there no one who can fix this little thing?
That would be great and would not only help me a lot.

[filikun]

Not sure why card_mod does not work on 1.4.1 but I'm having the same issue...