cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

Apply CSS on a Panel in Repeating section

Jump to solution

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
{

 }
 ______________________________

Labels: (1)
Reply
3 Replies
Workflow Hero

Re: Apply CSS on a Panel in Repeating section

Jump to solution

jQuery (=NWF$) has no method getElementsByClassName, thats javascript nativ.

Please use class selector, see https://api.jquery.com/class-selector/ 

0 Kudos
Reply
Workflow Hero

Re: Apply CSS on a Panel in Repeating section

Jump to solution

I'm not very good at this, can you please show me how the code should look like now? 

0 Kudos
Reply
Workflow Hero

Re: Apply CSS on a Panel in Repeating section

Jump to solution

instead of

NWF$ (document).getElementsByClassName("HideReportingPanel")[0]

simply try

NWF$(".HideReportingPanel")[0]

but even with visibility changed through CSS it will not be any better, repeating section will not resize on it own.

forcing repeating section to resize is quite complex.

have a look on this  

0 Kudos
Reply