(continuation of this post)
Additional styling:
Create a new view with a “panel mode”:
title: mdc_height_transp
path: mdc_height_transp
badges: []
cards:
- type: entities
entities:
- entity: input_number.test_number_2
name: default
- type: section
- entity: input_number.test_number_2
name: compact + no right padding
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
}
- entity: input_number.test_number_2
name: + transparent
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + underline
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + border
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + no ripple
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__ripple {
display: none;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + border + no ripple
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-text-field__ripple {
display: none;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + border on hover + no ripple
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border-radius: 4px !important;
border: 1px solid transparent;
}
.mdc-text-field:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-text-field__ripple {
display: none;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_number_2
name: + transparent + shifted to right
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: var(--card-background-color);
margin-right: -16px;
}
- type: section
- &ref_sensor_row
entity: sensor.processor_use
name: sensor
#########################################################################################
- type: section
label: with UoM
- entity: input_number.test_value_uom
name: compact
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
- entity: input_number.test_value_uom
name: + transparent
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: var(--card-background-color);
}
- entity: input_number.test_value_uom
name: compact + no right padding
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
}
- entity: input_number.test_value_uom
name: compact + no UoM-paddings
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + no right padding
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + transparent
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: var(--card-background-color);
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + underline
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.: |
:host {
--mdc-text-field-fill-color: var(--card-background-color);
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 0px;
}
- entity: input_number.test_value_uom
name: + border + no underline + custom UoM-paddings
card_mod:
style:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
font-size: 10px;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.: |
:host {
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: var(--card-background-color);
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 8px;
}
- type: section
- *ref_sensor_row
######################################################################################################################
- type: entities
entities:
- entity: input_select.test_value
name: default
- type: section
- entity: input_select.test_value
name: compact
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.: |
ha-select {
height: 40px;
}
- entity: input_select.test_value
name: compact + transparent
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + underline
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + border
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + no ripple
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + border + no ripple
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- entity: input_select.test_value
name: compact + transparent + border on hover + no ripple
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border-radius: 8px !important;
border: 1px solid transparent;
}
.mdc-select__anchor:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-select__ripple {
display: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-select-fill-color: transparent;
}
- sun.sun
- type: section
- sun.sun
- type: section
label: '-'
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
######################################################################################################################
- type: entities
entities:
- entity: input_text.test_text
name: default
- type: section
- entity: input_text.test_text
name: compact
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-textfield {
height: 40px;
}
- entity: input_text.test_text
name: compact + transparent
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + underline
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + border
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + no ripple
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + border + no ripple
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- entity: input_text.test_text
name: compact + transparent + border on hover + no ripple
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border-radius: 8px !important;
border: 1px solid transparent;
}
.mdc-text-field:hover {
border: 1px solid rgba(127,127,127,0.5);
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.mdc-text-field__ripple {
display: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
- sun.sun
- type: section
- sun.sun
- type: section
label: '-'
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
- type: entities
entities:
- entity: input_number.test_number_2
name: default
- type: section
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
- type: section
label: '-'
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: section
- sun.sun
The card has 4 columns:
– 4th - contains “sun” entity rows and used as a “scale”;
– 1st - contains rows for input_number
(“box mode”);
– 2nd - contains rows for input_select
;
– 3rd - contains rows for input_text
.
Note: the card does not contain rows for input_datetime
- just because my screen may show 4 columns maximum (3 for helpers, 1 for a “scale”); examples for input_datetime
will be considered later.
What we can see here:
1.All rows have same height (except 1st rows in each column which are input_number
, input_select
& input_text
rows with a default height) - since every input_number
, input_select
& input_text
has a customized height (see “Styling a height” topic above).
2.All other input_number
, input_select
& input_text
rows have custom styles as described below.
3.Regarding the right padding for a value:
Chrome:
Only the last row for input_number
w/o UoM has a same right padding as a conventional sensor row:
![image](https://community-assets.home-assistant.io/original/4X/e/c/f/ecf85829d302c05d38afd97060c0b38099012f33.png)
This right offset is used for a “up/down” control:
![tr_q](https://community-assets.home-assistant.io/original/4X/5/4/c/54cc8c268d4bf23dc49df77cc3ddc9d1194367a3.gif)
Unfortunately this looks totally differently on MacOS & iOS - compare it by yourself…
Alternatively - use a style to display a field’s boundaries since the right boundary has the same right padding as a conventional sensor row:
![image](https://community-assets.home-assistant.io/original/4X/a/2/e/a2ee04ccfbc39693ce8e2d189e84969dea285a46.png)
You can use styles Nos 1, 4, 6.
Firefox:
Since the “up/down” control is always displayed - choose any style (Nos 1…8).
4.Regarding the right padding for a UoM, horizontal spacing between a value & UoM:
Chrome:
![image](https://community-assets.home-assistant.io/original/4X/b/2/8/b2819533f5e34b64318735e852e59595d438a30e.png)
You can use styles Nos 5…8.
Firefox:
Same recommendation - use styles Nos 5…8 if you don’t hate these wide fields, otherwise try to decrease a field’s width - or do not use Firefox…
Custom styles for input_number
w/o UoM:
1.Custom height + removed right padding.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.
8.Same as (2) + field shifted to right.
![tr_q1](https://community-assets.home-assistant.io/original/4X/9/e/d/9edff58c7117b7274052dcfba05a6f5f606d94d1.gif)
Styles for input_number
with UoM:
1.Custom height.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (1) + removed right padding.
4.Same as (1) + removed paddings for UoM.
5.Same as (4) + removed right padding.
6.Same as (5) + transparent (removed underline, transparent background).
7.Same as (6) + underline.
8.Same as (5) + border + custom paddings for UoM.
![trsss](https://community-assets.home-assistant.io/original/4X/d/5/7/d570cb4de187c6038903107f210440c91166b899.gif)
Styles for input_select
:
1.Custom height, compacted name (label) and value.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.
![tr1](https://community-assets.home-assistant.io/original/4X/3/4/7/3471ea1b52046c0167ce7a861d979ebfb5db9da3.gif)
Same for input_text
:
![tr2](https://community-assets.home-assistant.io/original/4X/c/5/2/c52b8d23a16098bfa5653cd38fb67e6407b98c71.gif)
Notes:
1.This style is used to wrap long names for input_number
rows and may be omitted:
hui-generic-entity-row $: |
.info {
text-overflow: unset !important;
white-space: unset !important;
}
2.These test entities are used for this demo:
– input_number.test_number_2 - any helper in a “box” mode;
– input_number.test_value_uom - any helper in a “box” mode with UoM;
– input_select.test_value - any helper;
– input_text.test_text - any helper;
– sensor.processor_use - any sensor (better with UoM) (here I am using one from a “sysmonitor” platform).
Chosen styles may be specified in card-mod-theme, check the example below:
card-mod-row-yaml: |
hui-generic-entity-row:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-text-field__input {
{% if config is defined %}
{% if config.entity is defined %}
{% if config.entity.startswith('input_text.') %}
align-self: end;
{% endif %}
{% endif %}
{% endif %}
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
border: 1px solid rgba(127,127,127,0.5);
border-radius: 4px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
--mdc-select-fill-color: transparent;
}
ha-textfield {
height: 40px;
--text-field-padding: 0px 0px 0px 16px;
--text-field-suffix-padding-left: 0px;
--text-field-suffix-padding-right: 8px;
--mdc-text-field-fill-color: transparent;
}
(continuation in this post)