PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Conditonal logic causes form to stretch beyond the the containing element

  1. HI,

    First thanks for a great plugin, I am well impressed!

    I am having one problem though:

    When I use a conditional field (the logo related question on the form you'll find at the url I provide below), when the logic is triggered and the extra fields appear they push the rest of the form down, but this causes the form to move outside the containing element.

    I am sure its a simple CSS conflict but am hoping you have come across it before to shorten my bug hunting time?

    The url: http://www.impowersites.com/?page_id=5

    Posted 14 years ago on Saturday January 9, 2010 | Permalink
  2. After further testing it seems the conditional logic javascript conflicts with on of the scripts used for the superfish drop down menus.

    You can see it here: 2 identical forms, 1 with conditional logic (the first urtl) and one without. The conditional bit is the section of the form regarding the logo.

    With conditional : http://www.impowersites.com/?page_id=5

    Without : http://www.impowersites.com/?page_id=88

    So maybe the other part of the problem (the form pushing outside its containing element) is caused by the same conflict?

    Note the arrows in the navigation menus denoting the presence of subpages. These arrows vanish when the conditional bit is active.

    Posted 14 years ago on Saturday January 9, 2010 | Permalink
  3. Found another interesting conflict/bug. I use a line of code in my CSS shamelessly lifted from the Wordpress default theme.

    font-size: 62.5%; on the body tag which resets 1em to 10px.

    However this seems to be causing the checkboxes and radio inputs to be out of alignment (the labels for these fields is lower then the inputs.

    Removing the font reset code from the CSS eliminates the problem (although it throws all my fonts off in size).

    I have gone and removed ALL CSS except this one line and was still able to observe the problem.

    I can't think of any reason that line of CSS should cause this problem nor can I fix it so far. Any thoughts would be appreciated!

    I have observed this in Firefox. I haven't checked IE yet.. not sure I want to LOL.

    Thanks for any help on this and great plugin!

    P.S. I tested this on the default Kubrick theme and saw the same thing
    P.P.S I looked in IE and Opera and FF on Windows and the alignment issue only seems present in FF in Linux though the first bug I reported seems to be browser agnostic and affects them all.

    Posted 14 years ago on Saturday January 9, 2010 | Permalink
  4. Checking it out, will let you know what I can find out asap.

    Posted 14 years ago on Sunday January 10, 2010 | Permalink
  5. I'm working through the questions one by one so here's the deal on the conditional/resizing.

    You theme is using a script to dynamically equalize the column heights. It basically determines the height of the tallest column, then writes an actual height value as an inline style attribute.

    screenshot

    The script is loaded in the theme header and the gravity forms conditional logic scripts are loaded in the page footer. Since the column sizes are already a set height (inline style) by the time the GF logic script runs, the column script is not recalculating the height to accommodate the new content. If you reload the page, you'll see that the column script will then adjust properly.

    You might try moving the column.js script reference to the theme footer after the <?php wp_footer(); ?> call & see if that makes a difference.

    I'm not 100% sure if that will help or not, but it's a place to start.

    Posted 14 years ago on Sunday January 10, 2010 | Permalink
  6. I'm not seeing the conditional logic enabled on the second form. When I load the page I see the "Logo Design continued" section already active. Have tried this in several browsers. Can you verify that the conditional is set up correctly in the form?

    http://www.impowersites.com/?page_id=88

    Posted 14 years ago on Sunday January 10, 2010 | Permalink
  7. In looking at the checkbox alignment issue, I found a "height:1px;" declaration on line 1738 of your themes style.css file. Once I disabled that, the formatting was fine.

    screenshot

    I checked in Firefox, Safari, Chrome.. but didn't verify it in IE.

    We haven't had any other reports of this problem and I'm not able to replicate any formatting issues with the default (Kubrick) theme on my test site. The formatting appears to be correct. FYI, this is running WordPress 2.9.1 and Gravity Forms 1.3.8

    screenshot

    Posted 14 years ago on Sunday January 10, 2010 | Permalink