Lovelace: custom sidebar card

Share your Projects! Dashboards & Frontend
308

Too bad this doesn’t support multiple dashboards :frowning:

309

Does anyone have problems with the Custom Sidebar Card since the update to Home Assistant 0.116.0?
Since the update my default start page is not loaded correctly when I start Home Assistant.
However, if I deactivate the Custom Sidebar, it is displayed correctly.

I have also tried several devices and tried to clear the browser cache. But this did not help

Start page with activated sidebar:

76657t
76657t1890×911 37 KB

Start page with deactivated sidebar:

76657678t
76657678t1879×898 43.5 KB

310

Just did the update and it looks like there are no problems except the one i describe a couple of posts ago, but that was also before the update.

311

Anyone who knows how to add spacing between the lines? :confused:

312

Same issue … i have to go up right … 3 dots refresh… weird

313

Hi,
how you made 1st 2 buttons with persons? Can you please share your config

Thanks

314

Possibly the problems are related to the last changes made in Home Assistant 106:

The problem seems to be the custom homekit style card, also from @DBuit, and not the sidebar card.
Does anyone here have enough debug experience to get to the bottom of this problem? Maybe we can solve the problem ourselves, because it seemd that @DBuit is currently very busy.

@timota; You can find my current configuration on my GitHub page. The concrete code for the person cards is this one:


Send me a PM if you have any questions.

Greetings

315

Many thanks. Will try myself first.

316

Customer-header can no longer be used to hide the head bar.I now use the kiosk-mode. But as a result, the sidebar no longer goes at the bottom of the screen. How can I solve this problem? I put the sidebar in red so that it is more visible.

Capture1
Capture1388×945 51.4 KB

318

@Alindil

Little annoying the fix.

Open Kiosk.js file

replace with

  if (window.location.href.indexOf('kiosk') > 0) {
    setTimeout(function() {
        try {
            const home_assistant_main = document
                .querySelector("body > home-assistant").shadowRoot
                .querySelector("home-assistant-main");

            const header = home_assistant_main.shadowRoot
                .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
                .querySelector("hui-root").shadowRoot
                .querySelector("#layout > app-header")
                .style.display = "none";

            const drawer = home_assistant_main.shadowRoot
                .querySelector("#drawer")
                .style.display = 'none';

            home_assistant_main.style.setProperty("--app-drawer-width", 0);
            home_assistant_main.shadowRoot
                .querySelector("#drawer > ha-sidebar").shadowRoot
                .querySelector("div.menu")
                .click();
                
            const mainView = home_assistant_main.shadowRoot
                .querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot
                .querySelector("hui-root").shadowRoot
                .querySelector("#layout > div")
                .style.height = 'calc(100vh)';

            window.dispatchEvent(new Event('resize'));

        } 
        catch (e) {
            console.log(e);
        }
    }, 200);
}

Open sidebar-card.js. On line 17807

replace

sidebarInner.style.height = (100 * _1vh) - headerHeight + 'px';

with

sidebarInner.style.height = (100 * _1vh) + 'px';
1 Like
319

@DBuit all of a sudden my sidebar is translucent, I think since 0.117? This looks sick!

image
image1512×2016 756 KB

320

thanks for an amazing card!! so much potential…
but I’m having an issue, i want to use the media art plugin to show the cover art whats playing in the background ( https://github.com/TheLastProject/lovelace-media-art-background/blob/f7752ae8e1007cd5f1d7825b55f6588957f3acda/README.md)

but how can i change the z-index of the sidebar, so its above the background?

321

did you manage to find a solution for this?how to put sidebar above background and opague? trying to do the same

322

Hi,

Anyone has this error on logs ?

2020-11-05 09:33:29 ERROR (MainThread) [frontend.js.latest.202009182] https://xxxxxxxxx:8123/hacsfiles/sidebar-card/sidebar-card.js:18269:25 Uncaught TypeError: Cannot read property ‘shadowRoot’ of null

1 Like
323

Tanks for a great card.
A question. Can you group menu items? Say I want first 3 paths, then a breakpoint then 3 more? I guess I can a item without action but I like the lines.

Thanks

324

Only thing I could do so far was setting a splitted background (aka on sidebar with fixed width while setting fixed background on right pane)

325

sidebar card seem no more loading since the upgrade to 118, did you notice the same ?

326

Using the twelve hour clock format however AM & PM is reversed. Does anyone know how to fix that?

327

Update - isn’t not reversed, it just does not switch to pm. Always says am.

328

Hi , please someone knows how to place the player card at the bottom? i m getting crazy

  bottomCard:
    type: 'custom:mini-media-player'
    cardOptions:
      entity: media_player.pi1
      hide:
        name: true
        power: true
        source: true
        volume: false
    cardStyle: |
      :host {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
      }

image
image527×855 77.4 KB