Element Add/Remove Style Class

Questions
1

Has anyone run into any issues using the element addStyleClass() and removeStyleClass() methods on a responsive form? This worked in 2023.3 and after upgrading to 2025.3 and it isn’t working. Through the debugger it appears that it works (output messages are correct), the class is added or removed from the element but this isn’t updated in my browser. Also, I have not deployed this yet, I’m currently only running this through the developer.

I have this same type of logic on a CSS form and it’s working just fine, just not on the responsive form.

The element is a Form Component Container, the form component is a CSS form with 2 labels and a text box. When the form is shown this element needs to be displayed or hidden based on data (isLOC) on the current record.

Code:

function showHideLOC() {
	application.output('showHideLOC(): hidden before? ' + elements.loc_wrapper.hasStyleClass('jts-hidden'));
	if (isLOC) {
		elements.loc_wrapper.removeStyleClass('jts-hidden');
	} else {
		elements.loc_wrapper.addStyleClass('jts-hidden');
	}
	forms.add_loan2_scenarios.setPmtType(isLOC == 1 || isDraw == 1);
	application.output('showHideLOC(): hidden after? ' + elements.loc_wrapper.hasStyleClass('jts-hidden'));
}

image
image527×259 5.62 KB

2

Code looks fine to me. The issue could be with your class.

I recreated your setup and could toggle the form container from the command console.

Only difference is I used the bootstrap class d-none.

3

Seain,

I tried changing the class from my jts-hidden to d-none and that doesn’t work either. I found that my jts-hidden class is the same as d-none.

image

image

My issue is that based on the output messages the class is getting added or removed correctly, but it isn’t getting updated in the browser. I added my logic to a sample you provided previously. This sample does not work for me, please see if this works for you.

Louis

4

My apologies, I did my testing with form containers, not form component containers.

You’re right, the class isn’t applied to the container. I don’t think it’s a bug though, I can’t find the documentation, but I recall reading that in NG, form component containers are designed in a way to render efficiently (since one form could contain many). I think this is why only the contained elements can be changed at runtime and not the container.

You’ll need to wrap each form component container in something (like a flex-item or a bootstrap column) and then apply the style to that. For example, with the following structure:

image
image588×180 4.56 KB

You could toggle the named flex-item by calling containers.flex_item_dynamic.addStyleClasses('d-none').

Why don’t use responsive forms in your form component containers? Displaying absolutely positioned elements within a responsive may bring layout issues since a responsive form grows with its content, but an absolute form grows with its parent.

I’ve attached a modified version of your solution that toggles the field, as well as an example container structure that I would normally use form1detail_copy.

5

Thanks for looking at this and for the new sample. I’ll work on switching my fields over to the responsive form components.

Do you know of a way to do this same thing on CSS forms? We have a combination of position and responsive forms and at this point I don’t want to convert all of the CSS forms to responsive in order to have the wrapper div to be able to show/hide specific fields.

6

What about this?

elements.field_hide_show.containedForm.field.visible = !!value2;
elements.field_hide_show.containedForm.label.visible = !!value2;
7

I think this would be another option but for now I’m adding the named div and adding/removing the class to hide/show the container. We have multiple of the form components and some of them have 3-4 elements, not just the 2 as in the example I posted. The named div is working well so far.

Thanks for your efforts on this issue.

8

Hi Louis,

Well CSS changes are the biggest challenge when moving from NG1, because the underlying DOM structure is different. And I think CSS display property is even more tricky. (Although setting this on an inner component was working, i.e. elements.fc.containedForm.myButton.addStyleClass

For me, setting the CSS visibility property of a FormComponent works, but that is not so nice for responsive forms or flex layout.

Otherwise, I encourage you to file a case and we can look at it to see if it is expected or not

Best,
Sean

9

I think there is a ticket already: