Spartacus
April 26, 2024, 6:42pm
1
Hi,
does anyboady know how to remove the calendar icon between the date and the time?
type: entities
title: Schaltzeiten
entities:
- entity: input_datetime.pr03_up_time
name: auf
icon: mdi:calendar-clock-outline
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 $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select:
$: |
.mdc-select__anchor {
height: 40px !important;
}
card_mod:
style:
.: |
:host {
--mdc-icon-size: 20px;
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
--ha-card-header-font-size: 20px;
--ha-card-header-color: #C0C0C0;
--paper-item-icon-color: red;
You’ll have to do some rearranging with the remainder of your code, but you are looking for
ha-date-input $: |
ha-svg-icon {
display: none;
}
Spartacus, the code you posted was taken from the main card-mod thread (my post dedicated to input datetime). Any special reason of keeping creating more and more new threads instead of asking in the main thread? When asking in the main thread, you will get answers faster, solutions will be in one place, less clutter in the forum.
1 Like
Spartacus
April 29, 2024, 6:39pm
4
Hi @Ildar_Gabdullin ,
yes you´re right, I will keep it in mind for further posts. I thought it is more structured to separate, the different usecases.
@LiQuid_cOOled ,
ha-date-input $: |
ha-svg-icon {
display: none;
}
into this section
style:
ha-date-input $:
ha-textfield $: |
.mdc-text-field {....
but I do not understand how! Ido not really understand the syntax and I do not understand when I have to use
Maybe someone can explain, how I can combine the “ha-date-input $:” and “ha-date-input $: |”
Thanks a lot,
@Spartacus For your benefit, I’d suggest understanding how to enter the shadowRoot using $: | and what .: | does. It will allow you to problem solve vs requesting assistance. Google DevTools will help you understand CSS structure.
@Ildar_Gabdullin guide provides extensive examples that you can test and use for reference. His guide played a major part in my learning process.
The code I gave you does work and I’d avoid the copy/paste method.
I’d also explore if you even needed the remainder of the mod code you were trying to combine. Your end goal wasn’t very clear.
type: entities
title: Schaltzeiten
entities:
- entity: input_datetime.pr03_up_time
name: auf
icon: mdi:calendar-clock-outline
card_mod:
style:
ha-date-input $: |
ha-svg-icon {
display: none;
}
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 20px;
--mdc-text-field-fill-color: transparent;
--ha-card-header-font-size: 20px;
--ha-card-header-color: #C0C0C0;
--paper-item-icon-color: red;
Spartacus
April 30, 2024, 7:57am
6
Hm,
the goal was explained in post #1 , to remove the calendar icon between the date and the time. It was not possibe for me to do so.
Your code only shows the date, but the time is missing and the text-field height is also not included. I am struggling with including those 4 lines into my code from post 1. I entered it, but the icon is still there! Means, somthing with the syntax is wrong!
type: entities
title: Schaltzeiten
entities:
- entity: input_datetime.pr03_up_time
name: auf
icon: mdi:calendar-clock-outline
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-svg-icon {
display: none;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select:
$: |
.mdc-select__anchor {
height: 40px !important;
}
card_mod:
style:
.: |
:host {
--mdc-icon-size: 20px;
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
--ha-card-header-font-size: 20px;
--ha-card-header-color: #C0C0C0;
--paper-item-icon-color: red;
My entity results shouldn’t matter! Your understanding is the only thing WRONG. Best of luck!
type: entities
title: Schaltzeiten
entities:
- entity: input_datetime.datetime
name: auf
icon: mdi:calendar-clock-outline
card_mod:
style:
ha-date-input $: |
ha-svg-icon {
display: none;
}
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 $:
ha-textfield:
$: |
.mdc-text-field {
height: 40px !important;
}
ha-select:
$: |
.mdc-select__anchor {
height: 40px !important;
}
card_mod:
style:
.: |
:host {
--mdc-icon-size: 20px;
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
--ha-card-header-font-size: 20px;
--ha-card-header-color: #C0C0C0;
--paper-item-icon-color: red;
Spartacus
April 30, 2024, 9:19am
8
Thank you for this,
but it seems to be tricky for you as well, because this code is totally ignored!
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: center;
}
span#label {
display: none;
}
and the span#label is shown!
And yes, currentley I do not really have the correct understanding how this css stuff works! But maybe there is no solution!
There is a solution. I didn’t verify all of your code and am not here to simply generate cards.
Spartacus
April 30, 2024, 9:28am
10
I will let you know, once I have it!
Spartacus
April 30, 2024, 2:37pm
12
I have it! I
I was also hoping that by removing the icon, the input field would be smaller, but that’s not the case.
Do you have any idea if there is a way to label the input fields with a text, or at least to define a pre-/suffix text? For the date, it is possible, by using the name, but for the time I did not find a way!
Code:
type: entities
title: Schaltzeiten
entities:
- entity: input_datetime.pr03_up_time
name: auf
icon: mdi:calendar-clock-outline
card_mod:
style:
ha-date-input $: |
ha-svg-icon {
display: none;
}
ha-date-input $ ha-textfield $: |
.mdc-text-field {
height: 30px !important;
# padding: 15px !important;
}
.mdc-text-field__input {
align-self: center;
width: 70px !important;
# font-size: 20px !important;
}
span#label {
display: none;
}
.: |
ha-date-input {
height: 30px;
}
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-text-field {
height: 30px !important;
}
ha-select:
$: |
.mdc-select__anchor {
height: 30px !important;
}
card_mod:
style:
.: |
:host {
--mdc-icon-size: 20px;
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
--ha-card-header-font-size: 20px;
--ha-card-header-color: #C0C0C0;
--paper-item-icon-color: red;
}
Sounds good!
