shrink excess gap when used in places that aren't an entities card + option to hide name altogether
Closed this issue · 4 comments
Is it feasible to shrink the name area so there isn't a big gap when this element is used in places other than an entities card? Might it also be feasible to hide the name area entirely if name=false?
My use cases are in the picture elements card
and in the custom banner-card
. I'm going for a fairly tight layout on my dashboards and without the extra gap I could put 2 of these in the space 1 normally requires. The gap also makes the buttons seem unrelated to the icon and name on a picture elements card
.
These adjustments would be handy as a consistent feature across all your custom elements.
I didn't realize you could use these elements anywhere other than in an entities-type card.
would you mind posting a screenshot of how yours looks in the two cards you mentioned and the code required to achieve it?
I can't make any promises but I can look into it. It might (probably will...?) end up being something that would be required to modify in those cards themselves instead of my elements since my stuff doesn't deal with the icon or entity names at all.
- This example shows your element in the banner-card. It looks reasonable as long as it's full width and I have the name displayed, but there is still more gap than I'd like. It would be better if the gap was gone so the parent card can center it in the zone.
# only showing config for the top card of the 3 displayed
background: '#90DBFF'
color: darkred
entities:
- entity: light.ge_14294_in_wall_smart_dimmer_level_2
name: Ceiling Light
- entity: light.master_bath_light
name: Bath Light
- attribute: current_position
entity: cover.master_bath_blinds
name: Bath Blinds
unit: '%'
- entity: fan.ge_12730_fan_control_switch_level
toggle: true
type: 'custom:fan-control-entity-row'
heading: "\U0001F6CC Master Suite \U0001F6C1"
type: 'custom:banner-card'
- This example shows what happens if I try to hide the name with a single space and try to have it in half the width of the card so I can show 2 fans. The gap needs to be removed so the buttons can be adjacent to the icon and not overflow the region.
# only showing config for the top card of the 3 displayed
background: '#90DBFF'
color: darkred
entities:
- entity: light.ge_14294_in_wall_smart_dimmer_level_2
name: Ceiling Light
size: 2
- entity: light.master_bath_light
name: Bath Light
size: 2
- attribute: current_position
entity: cover.master_bath_blinds
name: Bath Blinds
size: 2
unit: '%'
- entity: fan.ge_12730_fan_control_switch_level
toggle: true
name: ' '
size: 3
type: 'custom:fan-control-entity-row'
- entity: fan.ge_12730_fan_control_switch_level
toggle: true
name: ' '
size: 3
type: 'custom:fan-control-entity-row'
heading: "\U0001F6CC Master Suite \U0001F6C1"
row_size: 6
type: 'custom:banner-card'
- This example shows 2 instances, one with and one without the entity name. The gaps aren't good in either case, and you'll notice by the background color the buttons are overflowing the element's container if the text is missing.
# only showing basic config for above without all the other elements
# you'll need to point to a real picture on your system
elements:
- entity: fan.ge_12730_fan_control_switch_level
toggle: true
name: ' '
type: 'custom:fan-control-entity-row'
style:
transform: none
top: 100px
left: 0
background-color: 'rgba(0,0,0,0.8)'
- entity: fan.ge_12730_fan_control_switch_level
toggle: true
type: 'custom:fan-control-entity-row'
style:
transform: none
top: 150px
left: 0
background-color: 'rgba(0,0,0,0.8)'
image: /local/pictures/pool.jpg
type: picture-elements
I should be clear, I totally understand your element wasn't designed for these cases and I don't want to imply there is anything wrong with your implementation. I am just hoping it's feasible without a ton of work to make it work more fluidly in these circumstances.
I finally got a chance to look your code. I see what you mean about not having control over what I'm wanting to change. You are inheriting all of that layout from hui-generic-entity-row
as your container and just defining your additional buttons inside it. I would say it's not easily feasible, so I'll close this request. Maybe someday I'll get around to learning how to make my own element and see what I can come up with.