search

marcokreeft87 / room-card

Show multiple entity states, attributes and icons in a single card in Home Assistant's Lovelace UI
MIT License
216 stars 36 forks source link

Multi-line formatting for informational entities #35

Closed p1ne closed 2 years ago

p1ne commented 2 years ago

Is your feature request related to a problem? Please describe. Is seems good to allow to organize informational entities in two rows or in table form. E.g. to have temperature and humidity values one above the other and/or just divide perception entities with security related entities

Describe the solution you'd like To provide parameter with number of rows or ability to define table of infomational values via yaml nesting

Describe alternatives you've considered CSS?

Additional context None

marcokreeft87 commented 2 years ago

Check version 1.3.0 https://github.com/marcokreeft87/room-card/wiki/Configuration#rows

p1ne commented 2 years ago

Disagree with closure, as request is for info_entities, not for entities. E.g. to have temperature above humidity and/or to have longer statuses in 2nd line

like in screenshot below - I would like to have 44% under 23.4C, 47.47% under 20.18C and "Very comfortable" thermal perception somewhere on second line as well

image
marcokreeft87 commented 2 years ago

Hmm but why would you want that? That would look weird because the info entities row is made to be one row. There will be a huge gap between the info entities and the entities.

A second row of info entities would push everything on the entities row down.

image

You see?

p1ne commented 2 years ago

I see formatting problems on mobile device, that's why I would like to have the possibility to compact infomation in rows

telegram-cloud-photo-size-2-5255963222459137660-y

marcokreeft87 commented 2 years ago

Sorry that's a won't do for me. Maybe You can try something with card mod. The info entity row is designed for one row only. You can try to use icons in stead of text.

mihsu81 commented 2 years ago

@p1ne You can adjust the font size of the title and the vertical position of entities-info-row. This is what I used:

style: |
  .card-header {
    font-size: 15px !important;
  }
  div.entities-info-row {
    padding-right: 0px;
    top: 11px;
  }
yapishkahilt commented 1 year ago

@p1ne You can adjust the font size of the title and the vertical position of entities-info-row. This is what I used:

style: |
  .card-header {
    font-size: 15px !important;
  }
  div.entities-info-row {
    padding-right: 0px;
    top: 11px;
  }

This is exactly what I was looking to do and works perfectly. Thank you