How to make MDC controls input_number (“box” mode), input_select, input_text & input_datetime look less different from other entity rows:
MDC controls added in HA 2022.3 have a different look in comparison to other Lovelace entity rows:
1.Different row’s height:
2.Different right padding for a value & UoM:
3.Different horizontal space between a value & UoM (see the picture above).
This post contains styles for these controls to make them look more like other entity rows (if possible).
Warning: different browsers may display input_number rows differently; here pictures from Chrome are provided by default; pictures from Firefox are provided where differences are critical; as for Safari (MacOS, iOS) - sorry, you should compare it & get thrilled by yourself…
Styling a height:
Create a new view with a “panel mode”:
title: mdc_height
path: mdc_height
panel: true
badges: []
cards:
- type: horizontal-stack
cards:
- &ref_scale_card
type: entities
title: ...
entities:
- &ref_row_sun
entity: sun.sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
##############################################################################
- type: entities
title: default
entities:
- *ref_row_sun
- type: section
- entity: sun.sun
secondary_info: last-changed
- type: section
- entity: sensor.processor_use
name: sensor
- type: section
- entity: sensor.processor_use
name: sensor
secondary_info: last-changed
- type: section
- entity: input_number.test_number
name: slider
- type: section
- entity: input_number.test_number
name: slider
secondary_info: last-changed
- type: section
- entity: input_boolean.test_boolean
name: checkbox
- type: section
- entity: input_boolean.test_boolean
name: checkbox
secondary_info: last-changed
- type: section
- entity: input_number.test_number_2
name: default
- type: section
- entity: input_number.test_number_2
name: default
secondary_info: last-changed
- type: section
- entity: input_select.test_value
name: default
- type: section
- entity: input_text.test_text
name: default
- type: section
- entity: input_datetime.test_datetime
name: default
- type: section
- entity: input_datetime.test_time
name: default
- type: section
- entity: input_datetime.test_time
name: default
secondary_info: last-changed
- type: section
- entity: input_datetime.test_date
name: default
- type: section
- entity: input_datetime.test_date
name: default
secondary_info: last-changed
- type: section
##################################################################################
- type: entities
title: custom
entities:
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- *ref_row_sun
- type: section
- entity: input_number.test_number_2
name: custom height
card_mod: &ref_card_mod_input_number
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
- type: section
- entity: input_number.test_number_2
name: custom height
secondary_info: last-changed
card_mod: *ref_card_mod_input_number
- type: section
- entity: input_select.test_value
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: center;
}
span#label {
display: none;
}
.: |
ha-select {
height: 40px;
}
- type: section
- entity: input_select.test_value
name: custom height
card_mod:
style:
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.: |
ha-select {
height: 40px;
}
- type: section
- entity: input_text.test_text
name: custom height
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-textfield {
height: 40px;
}
- type: section
- entity: input_datetime.test_datetime
name: custom height
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: center;
}
span#label {
display: none;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $: &ref_style_height_datetime__time_input
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select:
$: |
.mdc-select__anchor {
height: 40px !important;
}
- type: section
- entity: input_datetime.test_datetime
name: custom height
card_mod:
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.: |
ha-date-input {
height: 40px;
}
ha-time-input $ ha-base-time-input $: *ref_style_height_datetime__time_input
- type: section
- entity: input_datetime.test_time
name: custom height
card_mod: &ref_card_mod_time
style:
ha-time-input $ ha-base-time-input $: *ref_style_height_datetime__time_input
- type: section
- entity: input_datetime.test_time
name: custom height
card_mod: *ref_card_mod_time
secondary_info: last-changed
- type: section
- entity: input_datetime.test_date
name: custom height
card_mod: &ref_card_mod_date
style:
ha-date-input $ ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
- type: section
- entity: input_datetime.test_date
name: custom height
card_mod: *ref_card_mod_date
secondary_info: last-changed
- type: section
##################################################################################
- *ref_scale_card
The card has 4 columns:
– 1st & 4th - contain “sun” entity rows and used as a “scale”;
– 2nd - contains entity rows for different domains (with & w/o secondary_info) + rows for input_number (“box mode”), input_select, input_text & input_datetime;
– 3rd - contains “sun” entity rows and customized rows for input_number (“box mode”), input_select, input_text & input_datetime.
What we can see here:
1.Rows for input_number (“box mode”), input_select, input_text & input_datetime have a bigger height than other rows. This may be fixed by customization - see a code above.
2.All other entity rows for different domains have same height.
Notes:
1.There are 2 customized rows for input_select:
– with a displayed name;
– w/o a displayed name.
2.Basic styles (incl. height) for input_number (“box mode”), input_select, input_text & input_datetime are described here:
– input_number
– input_select
– input_text
– input_datetime - part 1, part 2
3.These test entities are used for this demo:
– input_boolean.test_boolean - any helper;
– input_number.test_number - any helper in a “slider” mode;
– input_number.test_number_2 - any helper in a “box” mode;
– input_select.test_value - any helper;
– input_text.test_text - any helper;
– input_datetime - any 3 helpers for “datetime”, “date” & “time”;
– sensor.processor_use - any sensor (better with UoM) (here I am using one from a “sysmonitor” platform).
(continuation in the next post)