Make an element and any possible kin unscrollable

JavaScript
1

The following “XY problem” question is asked somewhat for learning and trial and error purposes.

Say I have an element with kins such as a contact form, a table, etc.
That element has complex markup created from backend not under my control.
The element itself and/or any possible kins appear scrollable due to whatever reason so I want to bruteforcelly set everything there to height 100% and disable any scrolling.

CSS pseudocode

/*The element itself*/
#x {height: 100% !important; overflow: visible !important}
/* Any possible child*/
#x > * {height: 100% !important; overflow: visible !important}

JavaScript I tried and failed

document.querySelectorAll("#prcf_form_wrapper *").forEach( (el)=>{
    el.style.height = "100%";
    el.style.overflow = "visible";
});

Undefined

You might have a suggestion how to do that bruteforce change.

2

Kin, or Children?

Why does this not work?

3

@m_hutley

Children always felt to me as “direct children” so I prefer to say “kin” or “offspring” rather than children.

About the CSS command, I don’t know, the contact form is still “scrollable”.

5

Then you won’t see any of the content that doesn’t fit if you disable scrolling?

At an any rate height:100% doesn’t work on it’s own and needs an unbroken chain of elements from root all with height defined in order for it to work. If indeed it did work then any of the children that you set to be 100% tall would be 100% tall from where they start so if they were at the bottom of the viewport then they would create a 200% height. (You could use 100vh instead of 100% but then your page would still be miles too long as every element would be 100vh tall).

Therefore the CSS you posted is basically nonsense and not something you should ever use.

Your problem lies elsewhere.

Please post a working demo of the problem that you want to solve and then we can give some real help otherwise the route you are following is a long rabbit hole I’m afraid. :slight_smile:

2 Likes
6

Much thanks, @PaulOB

Sadly I am hard in finding the right words to describe the problem I am having even in my own mind.

Just one note, even this doesn’t work:

#x {height: 100% !important; overflow: visible !important}

So yes, I guess I should start over in finding how to cope with this.

7

Yes height:100% becomes height auto unless its immediate parent has a height defined (other than auto or content height). If the parent also has height:100% then then that has to follow an unbroken chain of parent all the way up to the body element and finally html in order for any of them to work.

As I said you could say height:100vh for #x but that would assume that #x is the main page wrapper and starts at the top of the viewport and that margins/padding on the viewport are removed.

It’s a bit hard to offer concrete help without seeing exactly what we are dealing with :wink:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.