Conditional Fields Groups get deleted + select2 styling

  • Resolved leofromtheorck

    (@leofromtheorck)


    1 year, 6 months ago

    Hey, first of all: this plugin has been an absolute blessing for me! Thank you so much for creating it!

    I have looked up my problem on this forum multiple times and I hope I didn’t overlook anything. I have seen a nine month old thread with the same problem, but it seemed to be resolves by updates of both plugins (this and conditional fields).
    I am on the newest version of all plugins. My problem is: If I wrap my conditional fields group around my field like this, meaning directly around the div element containing the field, my [group] tags stay.
    If I wrap the whole container-div with the [group] tag, they immediately disappear.

    That would not be a problem of course, but if I don’t wrap the containers with it as well, I get like a weird look on the front-end of my form. You can see this on my page link. So I would want to hide or show the container-elements also based on conditional logic. What am I missing here? How can I get my group-tags to stay in my HTML?

    Similar but not entirely related, maybe someone knows an easy answer to this: I haven’t been able to style my select2 elements (took them out for now), especially the font color. Tried everything I could find online and watched videos, but my the font color never changes, not with !important, not with very specific selectors. Is there a trick? I haven’t worked with select2-elements before, so I feel like I’m just simply not seeing something.

    Thank you SO MUCH in advance!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Aurovrata Venet

    (@aurovrata)

    Hey, first of all: this plugin has been an absolute blessing for me! Thank you so much for creating it!

    wc, glad you find it useful. Consider leaving a review when you have a moment to spare.

    If I wrap the whole container-div with the [group] tag, they immediately disappear.

    Ya, am aware of this issue, which will be resolved in v5.0 which I am currently developing. It is fixed in the v5.0beta9 and I hope to get the first release candidate in about a month’s time. It’s been slow progress as a result of a bout of COVID and having to shift home to a new city ??

    What am I missing here? How can I get my group-tags to stay in my HTML?

    so in v4 the problem is that the UI editor attempts to convert your HTML structure into its UI equivalent and the algorithm to do this has been designed to handle container level [group] tags and therefore strips them. One way around this problem is to first complete your form design in the UI, then in the HTML editor, wrap your entire HTML with a simple <div> element which will disable the UI editor altogether and at which point your can add your [group] tags in the HTML editor and save your form.

    I haven’t been able to style my select2 elements

    you tried with the custom CSS editor (built-in this plugin)?

    I haven’t tried styling select2 beyond the default, although it should be possible. However, there is an alternative HTML Hybrid-dropdown field you can use if you don’t see the select2 specific funcitonality. these have been designed specifically for ease of styling.

    Thread Starter leofromtheorck

    (@leofromtheorck)

    Thank you so much for your thorough answer! Immediately left my review ??

    Great explanation as well. I will for now use the method you suggested and wrap the whole form in a div once I’m done and wait for the release of the update for now. It’s so great to find a plugin that keeps improving!

    I will also checkout the hybrid html dropdown. I tried styling in the custom CSS tab that comes with your plugin but no matter which selectors I worked with I couldn’t get my changes to show. But I have the sneaking suspicion that this might just have to do with my global design settings and not with your plugin at all, just thought I’d see if maybe someone had the same issue I had.

    Anyways, thanks again, super super helpful ??

    Plugin Author Aurovrata Venet

    (@aurovrata)

    great, glad you are able to resolve your issues.

    I tried styling in the custom CSS tab that comes with your plugin

    wrt to styling, its important to override the CSS rules set by the plugin (inspect the element your want to style and make sure your custom CSS rule has a higher priority than that set by the plugin styles). If !important doesn’t work then likely your custom css is not being loaded. The plugin has a CSS editor specific for the form, which saves a custom CSS stylesheet in your child theme and loads only when the form page is being loaded. That should allow you to override in global settings.

    Wrt to tabs, v4 uses jQuery UI tabs and styles… this is being removed in v5 and replaced with pure CSS tabs instead.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Conditional Fields Groups get deleted + select2 styling’ is closed to new replies.