i have create custom energy dashboard. As i would like to go back in time checking the past consumption i would like to mimic the behaviour of type: energy-date-selection which is that bar where you can select the date/time span from the built Energy Dashboard. Is sort of floating there and it is always visible when you scroll down.
I am able to put in in my custom dashboard it is kind of static, staying in one place, so when i scroll down it disappears with the rest of content.
I was looking in the files for the built in energy dashboard but i cannot find to replicate the code.
Does anyone know to make type: energy-date-selection floating and center at the bottom of the screen just like it is on the built in energy dashboard?
Are you using card-mod ?, do you know there is some huge Topics in here in regards to this( Card-Mod ), and as well as documentation in the Cards Github.
If you can’t get it to “linger” anyone or both of you can post your card-code
I’m not sure what exactly you want me to “elaborate” Beside what i mentioned, yes you can use card-mod inside also, choose/set width/height etc
Well turned out, this might be tricky, as the date-selection open it’s calendar, down, so you wont see it if it’s “fixed” at the bottom. So you can only uses the forward<>backward button and Now/Compare So either this “.js function” has to be changed, or you could choose to have the selector at the left or right side or the Graph
Edit: Wait i see the new in Current version, open the calendar up, so they have changed that ( I was testing on the old version ( My “old” Offline HA Install )
So the new version of energy-date-selection should work inside a fixed custom:mod-card , For OP & You if you want it to be fixed, and always visible at the bottom, of screen (Viewport)
As mentioned you can place it anywhere on your screen and it’s fixed there
I love this, many thanks for sharing! I have an issue with the rendering being broken, it worked a coupe of times but now I only see parts of the picker. Anyone else seing this?
@haraldh That typo fixing the issue (“falex”) actually points exactly to the root cause: you are experiencing a severe flexbox collapse.
The old CSS hack stopped working because Home Assistant completely rebuilt the underlying DOM for the hui-energy-period-selector card recently. It is now extremely fragile when manipulated with card_mod.
We just spent hours fighting this exact behavior. Here is what is happening under the hood:
The Javascript ResizeObserver: HA added a hardcoded JavaScript observer that constantly measures the width of this card. If the card drops below ~450px, the JS physically deletes the arrow buttons from the DOM and moves them into the 3-dot overflow menu. If it drops below ~600px, it removes the “Now” button too. CSS cannot bring back elements that JS deleted.
The Flexbox Collapse: The date text (.date-range) now has a flex-grow property. If you try to squeeze the card, the flexbox collapses and cuts off the text (turning “Mar 17” into “M”). Disabling flex entirely (which your typo “falex” effectively does since the browser ignores invalid CSS) works around the collapse, but breaks the intended layout flow.
The Solution: We have to separate the logic from the visuals using a brute-force scaling hack.
We force the card to be 600px wide. This tricks the HA JavaScript into thinking it has a massive screen, so it keeps all the arrows and the “Now” button in the DOM. To make this fit on a mobile screen, we use a media query to apply transform: scale(0.6) which shrinks the rendered 600px card down to a neat 360px.
To prevent the touch hitboxes from misaligning during the scale (which makes the buttons unclickable), we center it on mobile using an old-school negative margin (left: 50%; margin-left: -300px;).
Here is the fully working code with all fixes applied:
- type: energy-date-selection
card_mod:
style:
hui-energy-period-selector$:
ha-date-range-picker$:
date-range-picker$: |
/* 1. THE POPUP (Opens upwards) */
.daterangepicker {
top: auto !important;
bottom: 75px !important;
margin-top: 0 !important;
transform-origin: bottom center !important;
}
/* Flip the arrows */
.daterangepicker:before {
border-top: 7px solid var(--divider-color, #ccc) !important;
border-bottom: none !important;
bottom: -7px !important;
top: auto !important;
}
.daterangepicker:after {
border-top: 6px solid var(--card-background-color) !important;
border-bottom: none !important;
bottom: -6px !important;
top: auto !important;
}
.: |
/* 2. ALIGNMENT (Fixes flexbox collapse and huge empty gaps) */
.content {
justify-content: center !important;
gap: 10px !important;
}
/* Remove flex-grow from the date to prevent it pushing arrows away */
.date-range {
flex: 0 1 auto !important;
margin: 0 !important;
}
.: |
ha-card {
/* 3. THE FLOATING BAR (Desktop Base) */
position: fixed !important;
bottom: 30px !important;
z-index: 9000 !important;
/* Dynamic centering (Sidebar-aware for desktop) */
left: var(--mdc-drawer-width, 0px) !important;
right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
/* Fix hitboxes */
pointer-events: auto !important;
/* THE TRICK: Force 600px width so the HA Javascript keeps ALL icons (arrows + 'Now') */
width: 600px !important;
height: 58px !important;
padding: 0 15px !important;
box-sizing: border-box !important;
/* Visuals */
background: rgba(25, 25, 25, 0.95) !important;
backdrop-filter: blur(15px) !important;
box-shadow: 0px 10px 40px rgba(0,0,0,0.8) !important;
border-radius: 30px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
/* Text contrast fixes */
--primary-text-color: white !important;
--secondary-text-color: white !important;
--mdc-icon-color: white !important;
--mdc-theme-text-primary-on-background: white !important;
}
/* 4. THE MOBILE HACK (Scaling brute-force) */
@media (max-width: 500px) {
ha-card {
/* Reset sidebar logic and hard-center using oldschool negative margin */
right: auto !important;
left: 50% !important;
margin-left: -300px !important; /* Exactly half of the 600px width */
/* Shrink the 600px card to 360px (600 * 0.6) for mobile screens */
transform: scale(0.6) !important;
transform-origin: bottom center !important;
}
}
/* Hide the host element in the grid layout without breaking it */
:host {
position: absolute !important;
width: 100% !important;
height: 0 !important;
pointer-events: none !important;
}
I copied this exact code, the date picker popup still goes down. Everything else works fine. Strangely, the compare popup goes up, but the date picker goes down no matter where I put it.
Same problem as Paul, the date picker keeps going down.
I checked with the browser inspector and style .daterangepicker appears not to exist (anymore?).
Regards,
Ben
