Hi All,
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?
I have the same Problem. You can put the Datepicker in the Header Bar using a custom card:
Header Cards
see here:
I just jumped in this topic as i was “fiddling” with custom:header-card
In Regards to energy-data in common there are lots of “choice”, depending upon what you want to have an overview over, and how , it all comes to ones “taste” and opinion, using different cards/views and using card-mod.
as for the header-card, it will have 2 rows as shown above, another card worth mention is custom:history-explorer-card.
Works with “sensors” of different “measurements” and “graphs/staples/time-line”
For “…
header_cards:
justify_content: null
cards:
- type: energy-date-selection
card_mod:
style: |
ha-card {
color: white;
--ha-card-background: "rgba(30, 30, 30, 0.0)";
--ha-card-border-width: 0px;
--ha-card-border-radius: 1px
}
But I would much prefer it to be floating, like the new one.
Might be related:
opened 11:00AM - 09 Jan 26 UTC
### Checklist
- [x] I have updated to the latest available Home Assistant versi… on.
- [x] I have cleared the cache of my browser.
- [x] I have tried a different browser to see if it is related to my browser.
- [ ] I have tried reproducing the issue in [safe mode](https://www.home-assistant.io/blog/2023/11/01/release-202311/#restarting-into-safe-mode) to rule out problems with unsupported custom resources.
### Describe the issue you are experiencing
The new "floating" period selector bar attaches to the bottom of the energy panel. In my setup, I have moved my nav-bar from the top to the bottom with card-mod theming, which is now covered/overlapped by the period selector. According to @dcapslock on the community forums, it is currently impossible to style the period selector directly through styling other than hacky work-arounds that have several side effects.
Forum link to post: https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/9856
### Describe the behavior you expected
I would like the period selector to be themable with card-mod or directly with themes. Actually, the only thing I need is to override the current
`.period-selector { bottom: max(var(--ha-space-4), var(--safe-area-inset-bottom, 0px)); }`
with
`.period-selector { bottom: max(var(--ha-space-13), var(--safe-area-inset-bottom, 0px)) !important; } `
and all would be good....
### Steps to reproduce the issue
1. Try to find a way to style the energy panel period selector
### What version of Home Assistant Core has the issue?
2026.1.0
### What was the last working version of Home Assistant Core?
_No response_
### In which browser are you experiencing the issue?
_No response_
### Which operating system are you using to run this browser?
_No response_
### State of relevant entities
```txt
```
### Problem-relevant frontend configuration
```yaml
```
### JavaScript errors shown in your browser console/inspector
```txt
```
### Additional information
_No response_
You can use Custom:mod-card to place it i.e at the bottom,centered
Can you elaborate on this? Thx
boheme61:
Custom:mod-card
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.
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
zillion42:
energy-date-selection
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 )
As mentioned you can place it anywhere on your screen and it’s fixed there
I got it:
- type: energy-date-selection
card_mod:
style: |
ha-card {
/* Fixierung am unteren Rand */
position: fixed !important;
bottom: 30px !important;
/* Zentrierung unter BerĂĽcksichtigung der Sidebar */
left: calc(50% + var(--mdc-drawer-width, 0px) / 2) !important;
transform: translateX(-50%) !important;
/* Dimensionen */
width: auto !important;
min-width: 450px !important;
height: 58px !important;
padding: 0 40px !important;
/* Design */
z-index: 9999 !important;
background: rgba(25, 25, 25, 0.95) !important;
backdrop-filter: blur(15px);
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;
display: flex !important;
align-items: center !important;
}
.card-content {
padding: 0 !important;
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
:host {
position: absolute !important;
width: 0 !important;
height: 0 !important;
z-index: 9999 !important;
}
1 Like
unfortunately the calendar opens to the bottom and is not visible when floating at lower screen position. Does anyone have a solution for that?
- type: energy-date-selection
card_mod:
style: |
ha-card {
/* Fixed position at the bottom */
position: fixed !important;
bottom: 30px !important;
/* NEW CENTERING STRATEGY WITHOUT TRANSFORM */
/* Span the box across the available width (accounting for sidebar) ... */
left: var(--mdc-drawer-width, 0px) !important;
right: 0 !important;
/* ... and use auto margins to center it horizontally */
margin-left: auto !important;
margin-right: auto !important;
/* Dimensions */
width: fit-content !important; /* Adapt width to content size */
min-width: 450px !important;
height: 58px !important;
padding: 0 40px !important;
/* Styling */
z-index: 9999 !important;
background: rgba(25, 25, 25, 0.95) !important;
backdrop-filter: blur(15px);
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;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.card-content {
padding: 0 !important;
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
/* IMPORTANT: Ensure the host element takes up no layout space */
:host {
position: absolute !important;
width: 0 !important;
height: 0 !important;
z-index: 9999 !important;
}
I think you have to “dig deeper” as it’s the" calendar-container" which opens, or above the “ha-date-range-picker”
Success! This works like a charm.
- type: energy-date-selection
card_mod:
style:
# 1. THE INTERNALS (The calendar popup itself)
hui-energy-period-selector$:
ha-date-range-picker$:
date-range-picker$: |
/* Forces the popup to open upwards */
.daterangepicker {
top: auto !important;
bottom: 50px !important; /* Pushes it above the floating bar */
margin-top: 0 !important;
transform-origin: bottom left !important;
}
/* Flip the popup arrow (optional, cosmetic) */
.daterangepicker:before {
border-top: 7px solid #ccc !important;
border-bottom: none !important;
bottom: -7px !important;
top: auto !important;
}
.daterangepicker:after {
border-top: 6px solid #fff !important;
border-bottom: none !important;
bottom: -6px !important;
top: auto !important;
}
# 2. THE CARD EXTERIOR (The floating bar)
.: |
ha-card {
/* Fixed position at the bottom */
position: fixed !important;
bottom: 30px !important;
/* Horizontal centering (Stable method) */
left: var(--mdc-drawer-width, 0px) !important;
right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
/* Styling / Dimensions */
width: fit-content !important;
min-width: 450px !important;
height: 58px !important;
padding: 0 40px !important;
z-index: 9000 !important;
background: rgba(25, 25, 25, 0.95) !important;
backdrop-filter: blur(15px);
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;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.card-content {
padding: 0 !important;
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
/* Hides the host element in the grid layout */
:host {
position: absolute !important;
width: 0 !important;
height: 0 !important;
z-index: 9000 !important;
}
For reference here is the complete Element:
<ha-card>
<template shadowrootmode="open">
<slot></slot>
</template>
<div class="card-content">
<hui-energy-period-selector narrow="">
<template shadowrootmode="open">
<div class="row datepicker-open">
<div class="backdrop"></div>
<div class="label">December 2025</div>
<div class="time-handle">
<ha-icon-button-prev>
<template shadowrootmode="open">
<ha-icon-button>
</ha-icon-button>
</template>
</ha-icon-button-prev>
<ha-icon-button-next>
</ha-icon-button-next>
<ha-date-range-picker minimal="" header-position="">
<template shadowrootmode="open">
<date-range-picker time-picker="false" twentyfour-hours="true" opening-direction="center" ... >
<template shadowrootmode="open">
<style>
/* ... Sehr langes internes CSS ... */
.daterangepicker { position: absolute; ... }
</style>
<div class="vue-daterange-picker">
<div class="form-control reportrange-text">
<slot name="input">
<div slot="input" class="date-range-inputs">
<ha-icon-button>
</ha-icon-button>
</div>
</slot>
</div>
<div class="daterangepicker ltr show-calendar show-ranges openscenter linked">
<slot name="header"></slot>
<div class="calendars">
<slot name="ranges">
<div class="date-range-ranges">
<ha-list activatable="">
<ha-list-item>Today</ha-list-item>
<ha-list-item>Yesterday</ha-list-item>
</ha-list>
</div>
</slot>
<div class="calendars-container">
<div class="drp-calendar col left">
<div class="calendar-table">
</div>
</div>
<div class="drp-calendar col right">
<div class="calendar-table">
</div>
</div>
</div>
</div>
<slot name="footer">
<div class="date-range-footer">
<ha-button>Cancel</ha-button>
<ha-button>Select</ha-button>
</div>
</slot>
</div> </div>
</template>
</date-range-picker>
<card-mod slot="none" card-mod-type="card-child-child">
<style>
/* Zwingt das Popup nach oben */
.daterangepicker {
top: auto !important;
bottom: 50px !important;
margin-top: 0 !important;
transform-origin: bottom left !important;
}
/* ... */
</style>
</card-mod>
</template>
</ha-date-range-picker>
</div>
<ha-dropdown placement="bottom-end" size="medium">
</ha-dropdown>
</div>
<card-mod slot="none" card-mod-type="card-child">
<style>
/* Styles fĂĽr ha-card Positionierung */
</style>
</card-mod>
</template>
</hui-energy-period-selector>
</div>
</ha-card>
2 Likes
I love your Energy Dashboard, strange that HA-Devs don’t have more “fantasy” or “Design” experience
haraldh
March 5, 2026, 8:35am
14
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?
If I typo the .card-content to e.g. “display: falex !important;” it works as it should. Hmm.
