Error: Space between input fields

  • Resolved bulls_shark

    (@bulls_shark)


    2 years, 3 months ago

    Dear support team, since the last update I have one line between the blocks on all 15 websites.

    Why is that? Can this be fixed?
    Image: https://ibb.co/ZfhFkN7

    Attached is the responsive code that we also use.

    .wps-form {
    width: 100%;
    margin: 0 auto;
}

.wps-form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wps-form-row .wpcf7-form-control {
    width: 100%;
}

.wps-form-column {
    flex: 1;
    padding: 0.5rem 0;
    width: 100%;
}

/* Notebook / Desktop */
@media only screen and ( min-width: 48em ) { 
    .wps-form-row {
        flex-direction: row;
    }

    .wps-form-column {
        padding: 0.5rem 0.5rem;
    }
}

    Thanks for the support

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hello,

    I had the same issue, after updating to the latest Contact Form 7 release. The reason might be WordPress’ auto-p-tagging on the shortcut function, with which the single WPCF7 fields are rendered. I can imagine, that previous versions used “shortcode_unautop” or a similar approach to remove the additional p-tags.

    However, I fixed it by adding the following CSS:

    .wpcf7-form p:not([class]) {
    margin: 0;
    padding: 0;
    display: contents;
}

    ~Sam.

    It creates a much bigger problem. In my case, due to the unnecessary <p> tags, the bootstrap grid of my forms is broken. This <p>-Tags are created around line-breaks and create html like this: <p><br></p>.
    I think this could be a filter problem.

    I have temporarily solved the problem by downgrading to 5.6
    Is there a fix for this issue?

    • This reply was modified 2 years, 3 months ago by jp73.
    Thread Starter bulls_shark

    (@bulls_shark)

    Hello Sam, thanks for the solution ??

    Hi Jp73 we hope for a quick update. According to the forum here we are not the only ones.

    Best regards and thank you for your feedback

    Thread Starter bulls_shark

    (@bulls_shark)

    Hi Sam, your solution didn’t help me unfortunately. I’m using contact-form-7.5.6.4 again

    Thank you very much

    Hi,
    Same here. Last update (5.7) now adds <p><br></p> on single line breaks. Waiting for a fix.

    Another way to sort this would be to add the below filter to functions.php, this prevents ‘wpauto p’ from adding paragraphs.

    Sites using css frameworks such as bootstrap can then use standard bootstrap form classes: e.g. .form-group.mb-4 > .form-control

    add_filter('wpcf7_autop_or_not', '__return_false');

    Thread Starter bulls_shark

    (@bulls_shark)

    Hello Logic Design Agency, thank you very much it worked!

    Best regards

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Error: Space between input fields’ is closed to new replies.