schwim
January 10, 2017, 2:53pm
1
Hi there everyone!
I’m trying to add the ability to dynamically add form elements to my form and I’m trying to follow this bootsnip to do so: http://bootsnipp.com/snippets/kWBPV
Here’s my page: https://wheeltastic.com/test.html
I would like it to have two text inputs bound to the “add” button. Like this poorly done gimp:
where when you click the add button, another row shows up with two text inputs and not just one.
The issues I’m having are multiple. First, as you can see on my page, it’s pushing the table all out of shape. I need to shrink down the spec and value fields but aren’t sure how. I found explanations on the div sizes for text inputs and have changed it accordingly, which now seems to have solved the stretch.
Secondly, it’s not working. I"ve added the required js and css into the page’s head. I’ve not found the reason for the failure yet.
First, I did what I could to validate the page: https://validator.w3.org/nu/?doc=https%3A%2F%2Fwheeltastic.com%2Ftest.html
I am unable to find the unclosed element that it references. I’m not sure if that’s causing the rest of my issues.
I know my issue is multifaceted and somewhat cluttered but would appreciate any help you could provide with getting this working.
Thanks for your time!
PaulOB
January 10, 2017, 5:22pm
2
The script is looking for a form element after .entry but you don’t have one.
I added a div with a class of .form instead and now it works.
<td colspan="3">
<label class="control-label">Additional Specifications</label>
<div class="controls">
<div class="form">
<div class="entry input-group col-xs-3">
<input class="form-control" name="specs[]" type="text" placeholder="Spec">
<input class="form-control" name="values[]" type="text" placeholder="Value">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</td>
The js was changed also from form:first .form:first.
<script type="text/javascript">
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls .form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
The above works and adds another row as required.
However, I notice that you have changed the site since I made those fixes and so you will need to ensure that the structure is the same as I have shown above in that you need .controls followed by .form followed by .entry divs.
e.g.
<div class="controls">
<div class="form">
<div class="entry input-group col-xs-3">
PaulOB
January 10, 2017, 5:29pm
3
Ok, looking at your revised code it looks like you can just add those classes to the existing divs like this:
<div class="control-group" id="fields">
<div class="controls">
<div class="form row">
<div class="voca entry">
<div class="col-xs-3">
<input class="form-control" placeholder="Spec" name="voca" type="text">
</div>
<div class="col-xs-3">
<input class="form-control" placeholder="Value" name="vocatrans" type="text">
</div>
<button type="button" class="btn btn-success btn-add" >
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add more
</button>
</div>
</div>
</div>
</div>
Specifically:
<div class="form row">
<div class="voca entry">
Then use the js I gave in the previous post.
schwim
January 10, 2017, 5:49pm
4
PaulOB:
<script type=“text/javascript”>
var controlForm = $('.controls .form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
Hi there Paul and thanks for all the help!
I apologize for the change in code. I need to start working on copies of my demo code to keep the confusion to a minimum. I altered the code as instructed and it seems to be working great!
I have a question though, concerning my html validation. Do you happen to see an unclosed element to my page or perhaps know of a better way of finding such a problem rather than just scanning line by line? I can’t find it anywhere.
Thanks!
SamA74
January 10, 2017, 6:06pm
5
The validator tells you which line the errors occur on, also viewing the source in Firefox marks them in red, so they are easy to spot.
It’s a bit confusing with all the nested tables, but I think fixing the incorrect nesting of the form element may fix the stray td tag too. Either way, the form is certainly wrongly nested.
ronpat
January 10, 2017, 6:44pm
6
@schwim , Have you found the errors yet?
schwim
January 10, 2017, 6:46pm
7
Hi there ronpat,
I have not but am trying to reconfigure the table so my forms don’t started nested in them, per Sam’s instruction to see if that fixes my validation problems. I haven’t figured out how to do so without messing up the display of the form yet.
Your display may partially depend on the incorrect nesting so you are probably better off to just fix your html and then go back and fix the display issues that getting your html right might cause.
2 Likes
ronpat
January 10, 2017, 6:52pm
9
I’m not a bootstrap person, and I do see bootstrap.min being called as one of your stylesheets. With that in mind, I do not believe that one can nest columns directly inside of columns, I believe columns should be nested within rows. If that is correct, then I see three directly nested columns just below the “End of Maintenance” comment, around line 374 or so. If I’m wrong, then this is a false alarm, but that IS where the trouble begns.
<div class="col-md-12">
<!-- Content Starts -->
<div class="col-md-12">
<div class='col-md-12' style='text-align:center'></div>
<table style='width:100%'>
Large portions of the page are good, but something is out of whack that could have been spotted had the code been carefully indented.
I’ve done the indenting, but as I said, I’m not a bootstrap person so this is the best start I can offer.
PaulOB
January 10, 2017, 8:50pm
10
No there is no unclosed element but the problem is that you start the form element inside a td tag and then close it in a separate td tag which is invalid. You need to move the opening and closing form tags so that they are both in the same container.
e.g. this would be valid: (I’ve omitted the head code as it is too big for this post)
<body>
<a id="backtotop"></a>
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="user-menu">
<ul>
<li><a href="/?action=my_stuff"><i class="fa fa-user"></i>My Account</a></li>
<li><a href="/?action=my_orders"><i class="fa fa-shopping-cart"></i>My Orders</a></li>
<li><a href="/?action=logout"><i class="fa fa-sign-out"></i> Log Out</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="header-right">
<!--
<ul class="list-unstyled list-inline">
<li class="dropdown dropdown-small">
<a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="key">currency :</span><span class="value">USD </span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">USD</a></li>
<li><a href="#">INR</a></li>
<li><a href="#">GBP</a></li>
</ul>
</li>
<li class="dropdown dropdown-small">
<a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#"><span class="key">language :</span><span class="value">English </span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">English</a></li>
<li><a href="#">French</a></li>
<li><a href="#">German</a></li>
</ul>
</li>
</ul>
-->
</div>
</div>
</div>
</div>
</div>
<!-- End header area -->
<div class="site-branding-area">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="logo">
<h1><a href="/"><img alt="Wheeltastic's Nifty Logo! Zowie!" src="/images/logo-header.png"></a></h1>
</div>
</div>
<div class="col-sm-6">
<div class="shopping-item"> <a href="/?action=cart">Cart - <span class="cart-amunt">$0.00</span> <i class="fa fa-shopping-cart"></i> <span class="product-count">0</span></a> </div>
</div>
</div>
</div>
</div>
<!-- End site branding area -->
<div class="mainmenu-area">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/?action=about">About Us</a></li>
<li><a href="/?action=contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End mainmenu area -->
<div class="maincontent-area">
<div class="zigzag-bottom"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="product-breadcroumb"> </div>
</div>
<div class="col-md-12">
<!-- Content Starts -->
<div class="col-md-12">
<div class='col-md-12' style='text-align:center'> </div>
<table style='width:100%'>
<tr>
<td style='vertical-align:top;'><h2>Edit a Cart Item</h2>
<br>
<form method="POST" name="ci_add" action="/nothing">
<table style="width:100%">
<tr>
<td style="width:30"></td>
<td style="vertical-align:top"><b>| <a href="/7HaFSpGvfwmnwKAdZBZd/?do=ci-duplicate&id=824">Duplicate</a> | <a href="/7HaFSpGvfwmnwKAdZBZd/?do=ci-edit&deactivate&id=824">Deactivate</a> |</b><br>
<br>
<input type="hidden" name="citype" value="">
<table>
<tr>
<td style="text-align:right"><b>Category:</b></td>
<td style="width:10"></td>
<td><select name="category">
<option>Choose One</option>
<option value="6">Lighting</option>
<option value="9" selected>· Accessories</option>
<option value="7">· Lights</option>
<option value="8">· Mounts</option>
<option value="5">Wheels & Related</option>
<option value="2">· Wheel Accessories</option>
<option value="1">· Wheels</option>
<option value="3">Winches & Recovery</option>
<option value="4">· Winches</option>
</select></td>
</tr>
<!--
<tr>
<td colspan="3"><img src="/images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td style="text-align:right">
<b>Primary Vendor:</b>
</td>
<td style="width:10">
</td>
<td>
<select name="vendor">
<option>Choose One</option>
<option value="1">Trans American Wholesale</option>
</select>
</td>
</tr>
-->
<tr>
<td colspan="3"><img src="/images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td style="text-align:right"><b>Brand:</b></td>
<td style="width:10"></td>
<td><select name="brand">
<option>Choose One</option>
<option value="6" selected>Baja Designs</option>
<option value="2">Mickey Thompson</option>
<option value="4">Mile Marker</option>
<option value="1">Pro Comp</option>
<option value="5">Superwinch</option>
<option value="3">Warn Industries</option>
</select></td>
</tr>
<tr>
<td colspan="3"><img src="/images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td style="text-align:right"><b>Model:</b></td>
<td style="width:10"></td>
<td><select name="model">
<option value="0">Choose One</option>
<option value="35">1069 Series</option>
<option value="7">2635 Series Predator</option>
<option value="15">2640 Series Vertigo</option>
<option value="9">2644 Series Syndrome</option>
<option value="24">3029 Series La Paz</option>
<option value="30">3036 Series Helldorado</option>
<option value="20">3186 Series Reflex</option>
<option value="8">3534 Series Rockwell</option>
<option value="17">3541 Series Phaser</option>
<option value="33">5001 Series</option>
<option value="27">5029 Series La Paz</option>
<option value="1">5034 Series Rockwell</option>
<option value="2">5035 Series Predator</option>
<option value="18">5041 Series Phaser</option>
<option value="10">5044 Series Syndrome</option>
<option value="11">5045 Series Proxy</option>
<option value="3">5050 Series Gauge</option>
<option value="28">5129 Series La Paz</option>
<option value="14">5139 Series Inertia</option>
<option value="16">5140 Series Vertigo</option>
<option value="12">5143 Series Sledge</option>
<option value="26">5182 Series Phantom</option>
<option value="25">5183 Series Vapor</option>
<option value="43">5184 Series</option>
<option value="4">6050 Series Gauge</option>
<option value="5">6051 Series District</option>
<option value="21">6631 Series Capacitor</option>
<option value="22">6632 Series Torque</option>
<option value="23">6633 Series Conductor</option>
<option value="40">7005 Series</option>
<option value="38">7031 Series</option>
<option value="42">7032 Series</option>
<option value="37">7033 Series</option>
<option value="29">7036 Series Helldorado</option>
<option value="34">7069 Series</option>
<option value="36">7089 Series</option>
<option value="41">7105 Series</option>
<option value="39">8101 Series</option>
<option value="13">8142 Series Blockade</option>
<option value="6">8151 Series District</option>
<option value="32">8180 Series</option>
<option value="19">8186 Series Reflex</option>
<option value="53">Classic Baja Lock</option>
<option value="51">Classic III</option>
<option value="50">Classic III Black</option>
<option value="54">Deegan 38 Pro 2</option>
<option value="49">Deegan 38 Pro 4</option>
<option value="44">Metal Series MM-164B</option>
<option value="46">Metal Series MM-164M</option>
<option value="47">Metal Series MM-245</option>
<option value="48">Metal Series MM-366</option>
<option value="45">Metal Series MM-489</option>
<option value="61">OnX</option>
<option value="59" selected>OnX6</option>
<option value="62">RTL</option>
<option value="55">S 2 Pro</option>
<option value="68">S2 Racer Edition</option>
<option value="60">S8</option>
<option value="52">Sidebiter II</option>
<option value="56">Squadron Pro</option>
<option value="67">Squadron Racer Edition</option>
<option value="57">Squadron Sport</option>
<option value="58">Squadron XL Pro</option>
<option value="63">XL 80</option>
<option value="65">XL Pro</option>
<option value="64">XL Racer Edition</option>
<option value="66">XL Sport</option>
</select></td>
</tr>
<tr>
<td colspan="3"><img src="/images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td style="text-align:right"><b>Title:</b></td>
<td style="width:10"></td>
<td><input type="text" size="40" name="title" placeholder = "Baja Designs OnX6 Black Rock Guard" value="Baja Designs OnX6 Black Rock Guard"></td>
</tr>
<tr>
<td style="text-align:right"><b>Short Title:</b></td>
<td style="width:10"></td>
<td><input type="text" size="40" name="short_title" placeholder = "OnX6 Rock Guard" value="OnX6 Rock Guard"></td>
</tr>
<tr>
<td style="text-align:right"><b>MSRP:</b></td>
<td style="width:10"></td>
<td><input type="text" size="10" id="msrp" name="msrp" value="14.95"></td>
</tr>
<tr>
<td style="text-align:right"></td>
<td style="width:10"></td>
<td><table>
<tr>
<td><b>Wholesaler:</b></td>
<td style="width:10"></td>
<td><button id="updWh1" type="button"><b>-10%</b></button>
<button id="updWh2" type="button"><b>-20%</b></button>
<button id="updWh3" type="button"><b>-30%</b></button></td>
</tr>
<tr>
<td><b>Our Price:</b></td>
<td style="width:10"></td>
<td><button id="updPr1" type="button"><b>-10%</b></button>
<button id="updPr2" type="button"><b>-20%</b></button>
<button id="updPr3" type="button"><b>-30%</b></button></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3"><hr></td>
</tr>
<tr>
<td style="text-align:right"><b>Price:</b></td>
<td style="width:10"></td>
<td><input type="text" size="10" id="price" name="price" value="13.46"></td>
</tr>
<tr>
<td style="text-align:right"><b>Shipping:</b></td>
<td style="width:10"></td>
<td><input type="text" size="10" name="shipping" value="0.00"></td>
</tr>
<tr>
<td style="text-align:right"><b>MPN:</b></td>
<td></td>
<td><input type="text" size="25" name="mpn" value="45-8010"></td>
</tr>
<tr>
<td colspan="3"><img src="/images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td style="text-align:right"><b>Available:</b></td>
<td style="width:10"></td>
<td><select name="available">
<option value="1" selected>Yes</option>
<option value="0">No</option>
</select></td>
</tr>
<tr>
<td colspan="3"><img src="/images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td><b>Additional Specs: </b></td>
<td></td>
<td><div class="control-group" id="fields">
<div class="controls">
<div class="form row">
<div class="voca entry">
<div class="col-xs-3">
<input class="form-control" placeholder="Spec" name="voca" type="text">
</div>
<div class="col-xs-3">
<input class="form-control" placeholder="Value" name="vocatrans" type="text">
</div>
<button type="button" class="btn btn-success btn-add" > <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add more </button>
</div>
</div>
</div>
</div></td>
</tr>
</table></td>
<td style="vertical-align:top"><input type="submit" value="Submit">
<br>
<h3>Wholesalers</h3>
<input type="text" size="10" name="ciw[1][name]" value="ORW">
<input type="text" size="20" name="ciw[1][url]" value="http://offroadwarehouse.com">
$
<input type="text" size="5" id="dare_price" name="ciw[1][price]" value="10.46">
<input type="radio" name="ciwprimary" value="1" checked="checked">
<a href="/7HaFSpGvfwmnwKAdZBZd/?do=ci-edit&id=824&delwid=810"><img src="/theme/1/images/delete-16.png" title="Delete this wholesaler" alt="Delete this wholesaler"></a>
<input type="hidden" name="ciw[1][previd]" value="810">
<br>
<input type="text" size="10" name="ciw[2][name]" value="">
<input type="text" size="20" name="ciw[2][url]" value="">
$
<input type="text" size="5" name="ciw[2][price]" value="">
<input type="radio" name="ciwprimary" value="2">
<br>
<input type="text" size="10" name="ciw[3][name]" value="">
<input type="text" size="20" name="ciw[3][url]" value="">
$
<input type="text" size="5" name="ciw[3][price]" value="">
<input type="radio" name="ciwprimary" value="3">
<br>
<input type="text" size="10" name="ciw[4][name]" value="">
<input type="text" size="20" name="ciw[4][url]" value="">
$
<input type="text" size="5" name="ciw[4][price]" value="">
<input type="radio" name="ciwprimary" value="4">
<br>
<input type="text" size="10" name="ciw[5][name]" value="">
<input type="text" size="20" name="ciw[5][url]" value="">
$
<input type="text" size="5" name="ciw[5][price]" value="">
<input type="radio" name="ciwprimary" value="5">
<br>
<br>
<h3>Competitors</h3>
<input type="text" size="10" name="cic[1][name]" value="LRO">
<input type="text" size="20" name="cic[1][url]" value="http://www.lowrangeoffroad.com/onx6-10-rock-guard-black-by-baja-designs-45-8010.html">
$
<input type="text" size="5" name="cic[1][price]" value="14.20">
<a href="/7HaFSpGvfwmnwKAdZBZd/?do=ci-edit&id=824&delcid=780"><img src="/theme/1/images/delete-16.png" title="Delete this competitor" alt="Delete this competitor"></a>
<input type="hidden" name="cic[1][previd]" value="780">
<br>
<input type="text" size="10" name="cic[2][name]" value="">
<input type="text" size="20" name="cic[2][url]" value="">
$
<input type="text" size="5" name="cic[2][price]" value="">
<br>
<input type="text" size="10" name="cic[3][name]" value="">
<input type="text" size="20" name="cic[3][url]" value="">
$
<input type="text" size="5" name="cic[3][price]" value="">
<br>
<input type="text" size="10" name="cic[4][name]" value="">
<input type="text" size="20" name="cic[4][url]" value="">
$
<input type="text" size="5" name="cic[4][price]" value="">
<br>
<input type="text" size="10" name="cic[5][name]" value="">
<input type="text" size="20" name="cic[5][url]" value="">
$
<input type="text" size="5" name="cic[5][price]" value="">
<br>
<br>
<table class="padding">
<tr>
<td class="border"><img width="150" alt="" src="/images/cartitems/45-8010-1.jpg"><br>
<input type="checkbox" name="image-1916">
Delete Image<br>
<input type="radio" name="isprimary" value="1916" checked>
<b>Make Primary</b><br></td>
<td class="border" style="height: 200px; text-align:center; vertical-align:middle"><a title="Upload an image" onclick="javascript:window.open('/7HaFSpGvfwmnwKAdZBZd/?do=ci-imgup&id=824','PUImgUp','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;" class="about_paypal" href="/7HaFSpGvfwmnwKAdZBZd/?do=ci-imgup&id=824"><img alt="" src="/theme/1/images/plus.png"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3"><textarea name="description" id="description" rows="20" cols="40"><p>The OnX6 Rock Guard is designed for daytime use, not only to protect from dust and dirt, but to protect from harsh terrain that may throw pesky rocks at your OnX6 LED light bar. If you are looking for extra protection from your riding environments and a cool cover, then the OnX6 Rock Guard is your answer!</p>
</textarea>
<script>
CKEDITOR.replace( "description" );
</script>
<input type="submit" value="Submit"></td>
</tr>
</table>
</form></td>
</tr>
</table>
<!-- Content Ends -->
</div>
</div>
</div>
</div>
</div>
<!-- End main content area -->
<div class="backtotop-area">
<div style="text-align:center"><a href="#backtotop">Back To Top</a></div>
</div>
<div class="footer-top-area">
<div class="zigzag-bottom"></div>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="footer-about-us">
<h2>W<span>heeltastic.com</span></h2>
<p>We walk to the ends of the internet to find the best deals for your 4 wheel drive ride. If that's not enough, we can also make a mean balloon giraffe.</p>
<div class="footer-social"> <a href="https://www.facebook.com/RealWheeltsatic" target="_blank"><i class="fa fa-facebook"></i></a> <a href="https://twitter.com/RealWheeltastic" target="_blank"><i class="fa fa-twitter"></i></a> <a href="#" target="_blank"><i class="fa fa-youtube"></i></a> <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a> </div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-menu">
<h2 class="footer-wid-title">User Navigation </h2>
<ul>
<li><a href="/?action=my_stuff">My Account</a></li>
<li><a href="/?action=my_orders">Order History</a></li>
<li><a href="/?action=contact">Contact Us</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-menu">
<h2 class="footer-wid-title">Company</h2>
<ul>
<li><a href="/?action=about">About Us</a></li>
<li><a href="/?action=contact">Contact Us</a></li>
<li><a href="/?action=privacy">Privacy Policy</a></li>
<li><a href="/?action=tos">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-newsletter">
<h2 class="footer-wid-title">Newsletter</h2>
<p>Sign up to our newsletter and get exclusive deals you wont find anywhere else straight to your inbox!</p>
<div class="newsletter-form">
<form action="/?action=newsletter" method="POST">
<input type="text" name="sub_1" placeholder="Enter your email">
<input type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End footer top area -->
<div class="footer-bottom-area">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="copyright">
<p>© 2016-The End of Time, Studley Enterprises. All Rights Reserved.</p>
</div>
</div>
<div class="col-md-4">
<!--<div class="footer-card-icon">
<i class="fa fa-cc-discover"></i>
<i class="fa fa-cc-mastercard"></i>
<i class="fa fa-cc-paypal"></i>
<i class="fa fa-cc-visa"></i>
</div>-->
</div>
</div>
</div>
</div>
<!-- End footer bottom area -->
<!-- jQuery sticky menu -->
<script src="/theme/1/js/owl.carousel.min.js"></script>
<script src="/theme/1/js/jquery.sticky.js"></script>
<!-- jQuery easing -->
<script src="/theme/1/js/jquery.easing.1.3.min.js"></script>
<!-- Main Script -->
<script src="/theme/1/js/main.js"></script>
<!-- Slider -->
<script type="text/javascript" src="/theme/1/js/bxslider.min.js"></script>
<script type="text/javascript" src="/theme/1/js/script.slider.js"></script>
</body>
</html>
The opening form was moved here:
<td style='vertical-align:top;'><h2>Edit a Cart Item</h2>
<br>
<form method="POST" name="ci_add" action="/nothing">
<table style="width:100%">
The closing form was moved here.
<script> CKEDITOR.replace( "description" );</script>
<input type="submit" value="Submit"></td>
</tr>
</table>
</form></td>
</tr>
</table>
Notice that it starts outside that table tag and closes after the table ends.
As Ron said you need to be careful with your columns and you must follow the rules. However if you are nesting divs that are effectively 100% wide (col-md-12 inside col-md-12) then you don’t need the column classes on the nested element at all (or you get double padding).
1 Like
schwim
January 11, 2017, 1:59pm
11
Thanks very much for your thoughts, insights and fixes, guys! I’m working on rebuilding the page and will update if I can’t manage to follow Paul’s lead
1 Like
system
April 12, 2017, 8:59pm
12
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
