search

iantrich / text-divider-row

🗂 Text Divider Row
MIT License
104 stars 13 forks source link

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

Open Waylikemark opened 2 years ago

Waylikemark commented 2 years ago

Checklist:

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. 341947F3-FC7A-45C4-B8FD-8FAF80903EAB

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

Additional information:

Gaute2000 commented 2 years ago

I experience the same problem.

tbrausch commented 2 years ago

Same here

jeremybreeschoten commented 2 years ago

Same here

JeroenDeckers commented 2 years ago

Same issue here

philder commented 2 years ago

Also here

chinyaolin commented 2 years ago

same issue works fine on 1.4.0

titiviking commented 2 years ago

Same here.

Improvement suggestion to work with :before & :after instead of raised border: https://github.com/iantrich/text-divider-row/issues/23

floodwayprintco commented 2 years ago

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 commented 2 years ago

Any news on this issue?

paulo1er commented 2 years ago

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;
  }

image

image

dbloom86 commented 2 years ago

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

`entities:

And it shows like this: image

paulo1er commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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

vahaldor commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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