🗂 Lovelace Text Divider Row

Share your Projects! Dashboards & Frontend
1

:card_index_dividers: Lovelace text divider row

image
image860×276 5.97 KB

image
image852×214 5.45 KB

19 Likes
2

Another great one, thanks!
Will go straight into my lovelace UI.

Would be cool with a text-align option in the future, like center, left, right…maybe?

5 Likes
3

My divider is showing the line through it? Have I done something wrong?

image
image560×642 59.5 KB

  - type: vertical-stack
    cards:
      - type: entities
        #title: Doors
        show_header_toggle: false
        entities:
          - type: 'custom:text-divider-row'
            text: Doors
          - binary_sensor.door_window_sensor_158d00022016b2
          - binary_sensor.door_window_sensor_158d000225432d
          - binary_sensor.door_window_sensor_158d0001e73c09
          - binary_sensor.garage
          - type: 'custom:text-divider-row'
            text: Windows
          - binary_sensor.door_window_sensor_158d0001e73af4
          - binary_sensor.door_window_sensor_158d0001e73a73
          - binary_sensor.door_window_sensor_158d0001e73aad
          - binary_sensor.door_window_sensor_158d0001e74875
4

You dont have to have text right?

5

The background uses --paper-card-background-color from the theme. Is that set in yours?

6

Opened a PR with a fix for the transparency issue

1 Like
7

Awesome! Merged. Thank you.

8

Works perfectly thanks to you both looks great

image
image504×764 62.5 KB

9

always getting the error: “Custom element doesn’t exist: text-divider-row.”

dowloaded “text-divider-row.js” into “\config\www” and added the resource with raw-editor.

anyone knows what i´m missing?

10

Helps if you show your configuration; resources and the card

11 
resources:
  - type: module
    url: >-
      /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=1.0.2b9
  - type: js
    url: /local/xiaomi-vacuum-card.js?v=1.1.1
  - type: module
    url: /local/custom-lovelace/weather-card/weather-card.js
  - type: js
    url: /local/simple-weather-card.bundle.js?v=0.3.0
  - type: module
    url: /local/text-divider-row.js

do i have to add something to “configuration.yaml”?

card:

entities:
  - entity: cover.ture
  - entity: cover.fenster
  - type: 'custom:text-divider-row'
    text: Scenes
  - entity: scene.window_nach_hause_kommen_david
  - entity: scene.window_haus_verlassen_david
  - entity: scene.window_bitte_nicht_storen_david
show_header_toggle: false
type: entities
12

Everything looks fine in terms of config, so must be the file you grabbed. Anything in console log? Did you grab the raw version? Is the path correct?

13

looks like there is something wrong with the .js:

http://IP:PORT/local/text-divider-row.js:7:1 Uncaught SyntaxError: Unexpected token <

filepath: \HASSIO\config\www

14

That happens when you grab the HTML version of the file and not the raw JS

15

clicked on the .js, then changed to raw and copied it.
now i downloaded everything and still got the error :confused:

16

Clear your cache

1 Like
17

i´m stupid. thanks!

18

Awesome. Would be nice to be able to configure the colour…

19

Set via your theme

20

Yes but it’s using an element I don’t necessarily want to change for other things…