[Solved] need some help with javascript. adjust CSS on a form

[Jaymer]

this would be for a render script on a form

i need to find specific <div>s and add css to the parent div.
I've done something like this before, just can't find the code.
i can't use a cell ID - there's gonna be many on this particular form that need to be set to "display:none", so this will loop through all found <div>s

find rows.png (129.93 KiB) Viewed 1332 times

[Jaymer]

have gotten this far, but this isn't finding all elements.
unlike in my OP, instead of add "display:none" I could just add my own class, which uses "display:none"

document.querySelector(".aw-empty").parentElement.classList.add("my-class-to-hide");

edit: ahh, forgot to use querySelectorAll

[Jaymer]

Code: Select all

var theList = document.querySelectorAll(".aw-empty");

for (let i = 0; i < theList.length; i++) {
  theList[i].parentElement.classList.add("aw-hide-line");
}

jaymertip --> render script to add css on form

[Jaymer]

We know Aware lays out its forms in a grid.
here is a screen with 2 columns

row grids.png (62.68 KiB) Viewed 1321 times

blue: occupied form rows
green: html cell
red: empty rows




the left is 4 "normal" rows of fields
the right has 1 HTML cell with HTML. It has an <a img src=xxx> tag to show an image, along with data fields.
AND i have an on-click JS function that shows the image when clicked on.

The problem is that the red boxes on the right are the 3 additional "empty" rows I referred to in the OP.
Aware doesn't really know about my image - or that it occupies 4 rows of height. So there are only little 'slivers' of space where a click on the image actually makes it through to the onclick event. And a user cannot see this - so a casual click on the image most likely won't do anything UNLESS you got lucky.

NOW, with my render script, I find these empty rows and change them to "display:none" which removes them entirely and allows clicking anywhere on the image to activate my popup. Voila!