If you add a style rule of display:flex to a group, it should persist.
Something like this should work:
[text t]
[group flex-group]
<div>1</div>
<div>2</div>
[/group]
<style>[data-id="flex-group"] { display: flex; justify-content:space-between; }</style>
(note that you can add the style to your stylesheet, it doesn’t need to be inline.)
See it in action here: https://conditional-fields-cf7.bdwm.be/form-tester/?hash=486d822b947e58d199a1acdb6f10e49a (link might expire after 10 days)
Hi Jules,
Thank you for your timely response.
I’ve tried your suggestion (added it to the stylesheet) and it does not override the inline HTML style statement that the js uses to toggles the display mode between none and block mode.
The display of the “Physical Location:…” block of fields (located in the middle of section 4 of the form) is controlled by the “Group is Meeting” radio buttons in section 3 of the form below:
https://www.scws-al-anon.org/new-al-anon-group-registration-form/
Ben
hmmm.. interesting.. And does it work if you add the styles inline in the form between <style> tags?
No it won’t.
The styles defined as HTML attributes have a higher precedent than any other styles (defined either inline between <style> tags or included in a stylesheet). The only way to override the HTML style attributes is to add the !important modifier to the lower priority style definitions. Doing so forces the display attribute to always defined as flex and consequently the toggling of the display attribute by the js has no effect (and the conditional fields are always displayed).
I’m not sure why it works in the form tester then. The fields are shown via the jQuery function $.show() which takes into account the initial display type of the group it’s making visible. I guess that if you declare the style before you are rendering the html page it will work.
I went back and switched to defining the style inline with <style> tags after the conditional block code and it is working as you described.
Although the inline style tags have a slightly higher precedent than the stylesheets defined before it (sorry the brain is a little foggy – order matters), the slightly highed precedent shouldn’t matter; however, it appears to make a difference as the jQuery function $.show() is clearly deciding to add the display:block style to the HTML element when the stylesheet approach is used (but not when the inline style tag approach is used).
Not sure why that is the case, but thanks for the help!
Ben
I guess jQuery is aware of the styles because they are available directly in the DOM. But not 100% sure about this. Anyhow, I’m glad you found a work-around for this issue.
