CSS how to "fix" picture-elements = no scrolling?

Configuration
1

Hi everyone,

I can’t seem to find a way to completely lock (fixed) the page (so there is no page scrolling)
(I’m not talking about the background image).

I’m using Picture-Elements card to customise my view but it still tends to scroll the page slightly when using touch on a tablet, which is quite frustrating when trying to adjust volume sliders etc…

I’m not a pro with CSS but after using CHROME to inspect the webpage and after a lot of fiddling I found what needs to be changed - I think - but I don’t know how to make this happen? Is there a way card-mod could do this or perhaps a custom CSS?

Below is the extact from the “elements” inspection.
If I change #contentContainer { position: relative to position: fixed it works…

:host {
  display: block;
        
        position: relative;
        z-index: 0;
}

:host ::slotted([slot=drawer]) {
  z-index: 1;
}

:host([fullbleed]) {
  position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
}

#contentContainer {
  position: relative;   #<-- IF I CHANGE THIS TO FIXED IT WORKS
        z-index: 0;
        height: 100%;
        transition: var(--app-drawer-layout-content-transition, none);
}

#contentContainer[drawer-position=left] {
  margin-left: var(--app-drawer-width, 256px);
}

#contentContainer[drawer-position=right] {
  margin-right: var(--app-drawer-width, 256px);
}

image
image1294×857 43 KB

I’ve seen a many people (ones using tablets) try and solve this without any luck.

I appreciate any support.

Thanks in advance

2

No idea, sorry.

Also please see point 16 here.

3

I had the same issue and using your example with the contentContainer I was able to fix this by using card-mod and adding the following to the theme file.

card-mod-root-yaml: |
    ha-app-layout $: |
      div#wrapper div#contentContainer {
        position: fixed;
      }
1 Like
4

Many thanks for your contribution @gerard33 !!! :+1: :+1: :+1:
Unfortunately, this did not work for me.
I added the lines to the theme yaml but no luck… any ideas?
(Yes Card-mod is installed)

5

Did you refresh the themes with frontend.reload_themes and reloaded the webpage?
If so can you share the content of the theme file?

6

Did the above work for anyone?