certain multi-column field types pull up subsequent rows

  • Resolved IT Hertz

    (@it-hertz)


    2 years, 6 months ago

    When each column of a multi-column row contains one of the following field types, the subsequent rows are pulled up (margin or padding reduced) relative to the bugged row:

    benchmark
    dynamic-dropdown
    dynamic-checkbox
    url
    tel
    number
    date
    checkbox
    radio
    acceptance
    file
    text-area (margin reduced to a lesser degree than the others)

    When any column of a multi-column row contains a non-offending field type (i.e., text, email, drop-down menu), it prevents the bug and the margin/padding is preserved.

    This occurs regardless of whether affected rows are in separate containers or in the same container as the bugged row, and regardless of column widths.

    I haven’t explored the plugin files in Notepad++ yet to attempt a debug, but I’m sure it’s a very simple fix.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter IT Hertz

    (@it-hertz)

    Actually, this behavior occurs with single column rows as well.

    Looking at my form with FF Webdev, I see the issue is div heights: 66.6-70.8px vs 85.8px, so the normal field div pushes the next row down and the offending field div doesn’t.

    • This reply was modified 2 years, 6 months ago by IT Hertz.
    • This reply was modified 2 years, 6 months ago by IT Hertz.
    Plugin Author Aurovrata Venet

    (@aurovrata)

    I would need to see your form page to see why this. However, in 99% of cases the issue is related to your theme. one way to test this is to simply switch your theme to one of the default WP themes such as Twenty Nineteen and see if the issue persists.

    Thread Starter IT Hertz

    (@it-hertz)

    I had tried that. Unfortunately, I used Twenty Twenty-Two, assuming it would be similar to the previous starter themes.

    I just now tested a fresh vanilla site build with no plugins installed other than CF7 and yours. Everything is correct in Twenty Nineteen, Twenty Twenty and Twenty Twenty-One.

    However, several things are screwed up in Twenty Twenty-Two — lucky me, the one I tried first!
    The label padding/margin is increased with some fields (e.g., date, dropdown), pushing the input boxes below those in adjacent columns.
    Also, tabs are borked. They are stacked vertically and do not function properly. I set up a tabbed section with different field layout per tab, which works in earlier starter themes, but not in Twenty Twenty-Two.

    I see the majority of reviews for Twenty Twenty-Two are negative.

    Btw, I’m using Zita theme for the public site in question. It has overwhelmingly positive reviews, but it does bork the divs, confirmed. I’m using Zita because it includes several needed features and layout options that I didn’t find in other themes. I can’t spend months more building a large site from scratch using a starter theme. Apparently, I will have to spend time making CF7 work with Zita, though. ugh..

    In case anyone wonders, I’ve been using WPForms Lite, but a recent need for certain functionality hit their paywall. The client (a poor dance school, for which I’m the pro bono webmaster) can’t pony up the dough for Pro versions of form builders that provide this functionality, and I won’t need it often enough to justify purchasing it for myself. So, I decided to try CF7, for which I have seen plugins that provide this functionality.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    There is an additional issue with Tenty-twety-two, which is related to the fact that it is a block theme, ie it is built for the new Full Site Editing (FSE) functionality that is being introduce in WP6.0 that is currently in beta testing. FSE is going to be a powerful tool for building sites, however it is not yet mature and I would therefore suggest that for now you stick to what is tried and tested, the classic themes.

    v4.13 that I will be releasing later today is fixing the issue encountered with block-themes in general, but if your block-theme does not have specific form field styling such as the 2022 theme, the new version will not compensate for this.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    WordSesh, an online WP conference site has a recent talk on theme history and the transition to block themes by Daisy Olsen. You can access the recordings of their talks for free is you register with them.

    Thread Starter IT Hertz

    (@it-hertz)

    Yep, your update fixed the Twenty Twenty-Two issues on my test site.

    I’ve fixed the Zita problems as well.
    The simplest one was due to the theme author neglecting to include the offending field types in their CSS rule — those fields had no padding for their info-tips while the other field types did, thus the pulling up of the lower fields. I didn’t figure this out right away, because I wasn’t using any info tips. d’oh! FF Webdev Tools to the rescue.

    The field height issues were due to Zita not resizing the offending field types along with the others — they were clamped for the sake of WooCommerce styling that’s built into Zita, so it wasn’t as easy as just adding my own CSS. Took longer to find that one.

    Looks good now and I’m just about done with this particular complex form part of the project for the school. Thanks!

    Plugin Author Aurovrata Venet

    (@aurovrata)

    Yep, your update fixed the Twenty Twenty-Two issues on my test site.

    I’ve fixed the Zita problems as well.

    yeh!

    Thanks!

    great. Do leave a review when you have a moment to spare ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘certain multi-column field types pull up subsequent rows’ is closed to new replies.

Tags