Lovelace: custom sidebar card

Share your Projects! Dashboards & Frontend
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

329

I have the same issue

Capture
Capture652×558 104 KB

330

Hi @Umbe and @adamlaakso1,

It works for me but i think the problem is the heigth of the sidebar it self.
You guys know developer console of your browser? Below i can see the height of the sidebar-inner please check how large it is and if the bottom card is at the bottom of the sidebar-inner.

If it is the problem is not the card but the sidebar it self. and than i need to find a solution :slight_smile: let me know!

example
example1908×815 92.9 KB

331

Here is mine

image
image2160×738 196 KB

but if i check the inner is another size
image
image1492×1470 533 KB

And i just made an update and my sidebar became grey … , the code there was making the bar same colour as the page , and now , not anymore.

image

image
image645×806 63.6 KB

Temporary fixed , changing the background and applying a fixed color to the bar , but if anyone get back the transparent , please let me know : )

image
image1799×817 179 KB

332

image
image6400×2160 1.61 MB

image
image6400×2160 1.58 MB

image
image6400×2160 1.64 MB

333

So, I found that in the Dev console I can temporarily change the PX in the line element style. Changing it to 950 from 905 fixed it for me. Let me know if I can edit the style somewhere to force the change. Sorry, I’m techy but not a web dev kind of person!

Capture
Capture1874×873 444 KB