Hi Folks: I have a simple light control panel consisting of 3-column grid cards. As some grid cards only have two tiles, I use the “spacer” card in the #1 position.
Looks likes this in visual editor:
While the “spacer” card (custom:layout-break) creates the right indent desired for the grid box, the “Title” remains pinned on the left margin of the grid card frame. After much research and trial/error, I still cannot find a way to indent the title so that it overhangs the first card. I added “multiline_secondary:true” to the card properties, and tried various types of spaces and invisible characters to include:
" title" and
{{ ‘;title’ }} and unicodes.U+3000, etc. *note: HTML space character codes are in front of title in the above two examples, but are not visible
I cannot get it to add spaces, either the HTML or Unicode characters appear on the screen, or there is a format error. The config for one of the cards appears below, and help would be appreciated.
square: true
type: grid
cards:
- type: custom:layout-break
multiline_secondary: true
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.second_floor_hall
icon: mdi:lightbulb
icon_height: 50px
name: 2nd FL HALL
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.photo_studio
icon: mdi:lightbulb
icon_height: 50px
columns: 3
title: SECOND FLOOR