Databases
StackOverflow2013
Postsdbo
POSpacing on elements added with Javascript is inconsistent
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSpacing on elements added with Javascript is inconsistent
    text
    copied!<p>I am dynamically adding elements into another element and there are some inconsistencies with the spacing. The more elements I add, the less spacing there is.</p> <p>Here is what it looks like:</p> <p><img src="https://i.stack.imgur.com/y4BvD.png" alt="enter image description here"></p> <p>After the third element, the spacing is like the above image (it doesn't go negative). My question is two fold: 1. Why is this happening; 2. How do I fix it? </p> <p>As a note, the default layout has one element, and when you click on the "add new route" button, it adds another route (there are 2, there are 3). I have tried setting the spacing and margins to negative numbers. I've tried putting comments in after the spot I add the new element. I'm out of ideas. </p> <p>Here is my HTML:</p> <pre><code>&lt;div id="main"&gt; &lt;div id="calendar"&gt; &lt;div class="column" id="time_slots"&gt; &lt;/div&gt; &lt;div class="column" id="day1"&gt; &lt;div class="date"&gt;&lt;/div&gt; &lt;button class="add_route" name="add_route" onclick=""&gt;Add New Route&lt;/button&gt; &lt;div class = "truck" id="day1_route1"&gt; &lt;p&gt;This is truck one&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="column" id="day2"&gt; &lt;div class="date"&gt;&lt;/div&gt; &lt;button class="add_route" name="add_route"&gt;Add New Route&lt;/button&gt; &lt;div class = "truck" id="day2_route1"&gt; &lt;p&gt;This is truck one&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="column" id="day3"&gt; &lt;div class="date"&gt;&lt;/div&gt; &lt;button class="add_route" name="add_route"&gt;Add New Route&lt;/button&gt; &lt;div class = "truck" id="day3_route1"&gt; &lt;p&gt;This is truck one&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="column" id="day4"&gt; &lt;div class="date"&gt;&lt;/div&gt; &lt;button class="add_route" name="add_route"&gt;Add New Route&lt;/button&gt; &lt;div class = "truck" id="day4_route1"&gt; &lt;p&gt;This is truck one&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="column" id="day5"&gt; &lt;div class="date"&gt;&lt;/div&gt; &lt;button class="add_route" name="add_route"&gt;Add New Route&lt;/button&gt; &lt;div class = "truck" id="day5_route1"&gt; &lt;p&gt;This is truck one&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="column" id="day6"&gt; &lt;div class="date"&gt;&lt;/div&gt; &lt;button class="add_route" name="add_route"&gt;Add New Route&lt;/button&gt; &lt;div class = "truck" id="day6_route1"&gt; &lt;p&gt;This is truck one&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="column" id="day7"&gt; &lt;div class="date"&gt;&lt;/div&gt; &lt;button class="add_route" name="add_route"&gt;Add New Route&lt;/button&gt; &lt;div class = "truck" id="day7_route1"&gt; &lt;p&gt;This is truck one&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="column" id="time_slots"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is my CSS: </p> <pre><code>.label { width:20px; } .table { font-size: 1.2em; } #main { border-style: solid; border-width: 1px; border-color: black; width:97%; height:900px; margin:auto; overflow: auto; white-space: nowrap; } #calendar { padding:1%; } .column { border-style: solid; border-width: 1px; border-color: black; min-width:10%; max-width:100%; height:800px; display: inline-block; overflow: auto; padding:10px; } .header { padding:0; margin:0; text-align: center; font-style: bold; } .truck { width:200px; border-style: solid; border-width: 1px; border-color: black; display:inline-block; margin:0px; } .column#time_slots { width:5%; min-width:5%; max-width: 10%; } .date { text-align: center; width:100%; } .column button { display:block; width:100%; width:100%; border-style: solid; border-width: 1px; border-color: black; } </code></pre> <p>Here is the Javascript:</p> <pre><code>$(".add_route").click(function(){ var num = 8; var truck = $(this).parent().find('.truck').length truck += 1; var w = $(this).parent().width(); $(this).parent().animate({width:(w+205)}, 1000); $(this).parent().append('&lt;div class = "truck" id="'+$(this).parent().attr('id')+'_route'+truck+'"&gt;&lt;p&gt;There are '+ truck +'&lt;/p&gt;&lt;/div&gt;'); $('#'+$(this).parent().attr('id')+'_route'+truck).hide(); var route_num = $(this).parent().find('.truck').length; var route_w = (100/route_num)-1; $('#'+$(this).parent().attr('id')+'_route'+truck).fadeIn(200); $(this).parent().css("padding", "10px"); }); </code></pre> <p>Here is the demo: <a href="http://jsfiddle.net/pfdNy/" rel="nofollow noreferrer">http://jsfiddle.net/pfdNy/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload