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

[Waylikemark]

Checklist:

• [x] I updated to the latest version available
• [x] 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: https://github.com/iantrich/text-divider-row/issues/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...