Apply CSS on a Panel in Repeating section

6 years ago
28 November 2017
3 replies
1 view

+9

cmikhaiel_e
229 replies

I've got a repeating section that contains a panel, (only one panel), which I want to Hide based on a condition.

My condition is based of a single line of text that I calculate (returns the difference between months) & a checkbox.

If the checkbox is yes & the single line of text value is greater than 1, then hide the panel.

The OOTB show/hide rules are hiding the fields but are not trimming the spacing. I learnt that this is a known bug (show/hide panels don't work in repeating sections) and if I use responsive design, that should fix it. But we have an old 2013 on-prem version. there is no option to update it now.

What I'mtrying to do, is apply a CSS on condition, which should Hide the panel and trim the white space when display = "none";

I just can't figure how to call or apply that CSS/function on the conditions I need in runtime. I wrote a javascript but it doesn't seem to be firing the rule. It is running fine - up until I display the alert, the last two lines are not firing and I'm not sure if it is the syntax or the way I'm approaching it.

Any help is appreciated, the problem is I need to show this by tomorrow morning... HELP!!

Project Reporting POC

NWF$(document).ready(function () {

var opt= NWF$("#" + chkOption);
opt.change(function()
{
if(opt.prop('checked'))
{
alert("Hide Previous Months");
var ta = NWF$ (document).getElementsByClassName("HideReportingPanel")[0];
ta.style.display= "none";
}
}
);
});

------------------------------

The custom CSS has this empty class.

Project Reporting POC

.HideReportingPanel
{

}
______________________________