[Custom Webview] How to Hide Web Button Element

How to Hide Web Element using Custom Webview Evaluate Java Script and Class Name or Class ID when a Kodular Button Component is trigger

component_method

document.getElementById('YourID').style.display = "none";
                             OR
document.getElementById('YourID').style.visibility = "hidden";
3 Likes

See that’s all , very simple. :+1::+1::+1::+1:

@Benedict_Peralta

2 Likes

Thank You!

This thing don’t have Class ID and the Class Name is Multiple

Capture

There is no Class ID

its very much there just have a look again

which class name do you want to hide? can you show. can you share the webpage in which the class exist so that i can try it

1 Like

I want to hide this
this is the link: https://meet.jit.si/ExtraParticipationsBreedSternly

Capture

@Future_Applications if you are asking to hide the invite people option then try this code

document.getElementsByClassName("overflow-menu-item")[1].style.display = "none";

this would work

2 Likes

as @Yashsehgal022 suggested, you can use that code to hide Invite people in desktop mode.
FYI getElementsByClassName returns an array-like object of all child elements which have all of the given class name. so you can select other elements too just by changing the index number
In mobile mode you need to use the below code to hide Invite people.

document.getElementsByClassName("overflow-menu-item")[2].style.display = "none";

2 Likes

I’m confuse. Which of this code are to make an element hidden?

document.getElementsByClassName(“overflow-menu-item”)[2].style.display = “none”;

or

document.getElementsByClassName(“overflow-menu-item”)[2].style.display = “hidden”;

1 Like

your code is wrong, hidden is used with visibility. You can use both :point_down:

document.getElementsByClassName(“overflow-menu-item”)[2].style.display = “none”;
document.getElementsByClassName(“overflow-menu-item”)[2].style.visibility = “hidden”;

it’s not working. It’s not hiding the Invite People element

did you tried this

and it would be great if you can show your blocks

Just wait i will check. the code is not working because all the elements are added dynamically and it has different class name on desktop, mobile and other devices.

1 Like

@HritikR @Future_Applications can set webview to desktop mode maybe

@Yashsehgal022 That will show the whole webpage in desktop mode which is not suitable for mobile applications. Main problem is it is adding all the options such as Invite people, Participants, Enter tile view when 3 dots are clicked. executing the javascript once to hide invite people won’t work. Invite people options will be shown when 3 dots are clicked. @Future_Applications There’s one way to do it by adding change/click listener to 3 dots and when ever change/click is detected it will hide that option

1 Like

@Future_Applications Try this

document.getElementsByClassName("toolbox-button")[3].addEventListener('click', function(){setTimeout(function () {document.getElementsByClassName("overflow-menu-item")[2].style.display="none"; }, 500)});

ezgif.com-gif-maker

2 Likes