finity69x2/fan-control-entity-row

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.

banner-card full width

# 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.

banner-card half-width overflows right and has gap where name was

# 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.

picture entities card, has gap where name was and overflows container

# 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.