SCABN Line Breaks in Form Cause Huge Gaps

The web browser shouldn’t be displaying hidden fields and the whitespace between them. I’m assuming you mean <input type=”hidden” …> inside a <form> — I don’t see why how many of them there are would cause extra line-breaks, as HTML generally ignores whitespace. Can you post the problematic html code and/or a site link?

Here’s the code … note all the <br /> tags.

<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="business" value="XXX"><br />
<input type="hidden" name="cmd" value="_cart"><br />
<input type="hidden" name="currency_code" value="USD"><br />
<input type="hidden" name="lc" value="US"><br />
<input type="hidden" name="bn" value="PP-BuyNowBF"><br />
<input type="hidden" name="upload" value="1"><br />
<input type="hidden" name="cancel_return" value="XXX"><br />
<input type="hidden" name="weight_unit" value="lbs"><br />
<input type="hidden" name="quantity_1" value="1"><br />
<input type="hidden" name="item_name_1" value="Men (Small)"><br />
<input type="hidden" name="amount_1" value="20"><br />
<input type="hidden" name="weight_1" value="0.01"><br />
<input type="hidden" name="quantity_2" value="1"><br />
<input type="hidden" name="item_name_2" value="Men (Large)"><br />
<input type="hidden" name="amount_2" value="20"><br />
<input type="hidden" name="weight_2" value="0.01"><br />
<input type="hidden" name="quantity_3" value="1"><br />
<input type="hidden" name="item_name_3" value="Men (Small)"><br />
<input type="hidden" name="amount_3" value="15"><br />
<input type="hidden" name="weight_3" value="0.01"><br />
<input type="hidden" name="quantity_4" value="1"><br />
<input type="hidden" name="item_name_4" value="Pro-Back Hat (White stitching on white hat)"><br />
<input type="hidden" name="amount_4" value="35"><br />
<input type="hidden" name="weight_4" value="0.01"><br />
<input type="hidden" name="quantity_5" value="1"><br />
<input type="hidden" name="item_name_5" value="Pro-Back Hat (Black stitching on black)"><br />
<input type="hidden" name="amount_5" value="35"><br />
<input type="hidden" name="weight_5" value="0.01"><br />
<input type="image" border="0" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="Make payments with PayPal - it's fast, free and secure!"></form>

And here’s a screenprint for that code – note the space between the form and the Paypal button: https://fullbloodedfighter.net/checkout-screen-for-scabn/

If no one else is having this problem, it must be something I did. I did a lot of styling to the addtocart form, but I didn’t do anything (that I know of) to the checkout form.

I bet this is an issue with your theme as it is adding the “formatting” <br’s> — can you try using one of the default WP themes and seeing if you see the same behavior.

Eep, no, our whole site is built around this theme. I’ll have to see if I can come up with a CSS trick to work around it. Or dig into the theme’s files and try to get rid of the BRs.

Thanks for your help.

I managed to work around it by applying display:none to the BRs in that form.

Problem solved. Thanks again!

I am having the same problem, and have tried it in twentytwelve, and twenty thirteen themes but it still is an issue.

I can apply display:none to the br’s in the div, but this then removed the spacing where I want it between the quantity box and other lines.

[ Moderator note: please wrap code in backticks or use the code button. Single quote does not work. ]

.addtocart br {
display: none;
}

The html created by the plugin is:

<div class='addtocart'>
<form method='post' class='apron' action='https://176.32.230.27/savethepuffer.co.uk/puffer-shop/'>
<input type="hidden" id="scabn-add" name="scabn-add" value="8adf00e3f9" /><input type='hidden' value='add_item' name='action'/>
<input type='hidden' class='item_url' value='https://176.32.230.27/savethepuffer.co.uk/puffer-shop/' name='item_url'/>
<input type='hidden' value='0' name='randomid'/>
<input type='hidden' value='apron' name='item_id'/>
<input type='hidden' class='item_name' value='Apron' name='item_name'/>
<input type='hidden' class='item_price' value='10.00' name='item_price'/></p>
<p id='cartname'>Apron</p>
<p id='cartcontent'>Unit Price: ￡10.00 eachQty:<input type='text' class='item_qty' value='1' size='2' name='item_qty'/>
<input type='submit' id='apron' class="add" name='add' value='Add To Cart'/>
</form>
</p>
</div>

How can I just target the br’s within the first part of the form, where the hidden input;s are?

thanks.

In mine, the Unit Price is outside the form, so it doesn’t get smashed up with the other items in the form. Qty and Add to Cart are on the same line, but that doesn’t look too bad.

If spacing a problem between the quantity and the button, you could add a right margin of 10 px or so to .item_qty.