Unexpected line break html tag inserted between text field and field description

xtiechirinos commented 7 years ago

What Version Of Caldera Forms, WordPress and PHP Are You Using?

4.7.2

Does Your Issue Presist When You Disable All Other Plugins and Switch To The Default Theme?

yes

What Is The Unexpected Beahviour?

The captions have a spurious

that adds padding but is impossible to control through CSS. It means captions are too far away from the widget they refer to.

<div role="field" data-field-wrapper="fld_3008902" class="form-group”>
    <label id="fld_3008902Label" for="fld_3008902_1" class="control-label">Initiatives</label>
    <p></p>
     <div class=“">
         <textarea data-field="fld_3008902" class="form-control" rows="6" id="fld_3008902_1" name="fld_3008902" aria-labelledby="fld_3008902Label" aria-describedby="fld_3008902Caption"></textarea>
        <br>
         <span id="fld_3008902Caption" class="help-block”>
            Key upcoming work (put each initiative on a new line)
        </span>
     </div>
</div>

What PHP Errors Have You Logged While Reproducing This Bug?

//

What JavaScript Errors Have You Seen While Reproducing This Bug?

//

qubez commented 7 years ago

Better Title: Unexpected line break html tag inserted between text field and field description.

I can confirm this issue. The code is adding a <br> html below text input fields, but adding them inconsistently (for example they are not added to conditionally shown fields). I found many <br> entries searching the codebase, but was unable to locate this particular one in a timely fashion. Also looked through some javascript to see if it could be generated there.

Additionally, unclosed br tags are not XHTML, and anywhere they are inserted breaks site validation in Wordpress. It needs to be <br />

A workaround that doesn't fork or break updates is to add this CSS to your child theme's style sheet: .form-group > div > br { display:none ! important;}

xtiechirinos commented 7 years ago

Christie Chirinos, awful titler of things.

qubez commented 7 years ago

I found in the theme I was using, in theme-name\functions\theme-functions.php, there was some code-mangling:


function remove_wpautop( $content ) { 
   $content = do_shortcode( shortcode_unautop( $content ) ); 
   $content = preg_replace( "#^<\/p>|^<br \/>|<p>$#", '', $content );
    return $content;
}

Removing the replace lines solved some of the problems I was having with the form output, but I then went completely postal on this theme and wordpress install, and gutted everything that messes with my html.

...

edit: I found another workaround that may be successful for cicichirinos that may not take deep editing of theme code.

install the Raw HTML Wordpress plugin and activate,
edit the page containing the form shortcode using the text (not visual) editor, and wrap the page with the raw tag (example: [raw shortcodes=1][caldera_form id="CF588ef6c58f17f"][/raw]
in the Raw HTML sidebar on that page, check all options
publish your page

Minifying the Caldera Forms code may bypass some theme-based line break insertion triggers.

CalderaWP / Caldera-Forms