Databases
StackOverflow2013
Postsdbo
POTwo pixels added to absolute position of elements added via javascript in chrome only
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwo pixels added to absolute position of elements added via javascript in chrome only
    primarykey
    data
    text
    <p>Here's my first question on stackoverflow. I've used you guys to answer many many questions in the past, but this time, I wan't able to find what I was looking for, so any help would be appreciated!</p> <p>I have a simple website I was playing with to brush up on css, javascript, jQuery, and html. I have an issue where I want to add an input textbox via javascript directly below the lowest existing textbox. It seems fairly simple, and it works properly in ie9 and firefox, but in chrome, each new textbox is pushed over to the right by 2 pixels.</p> <p>Here is the html and javascript code:</p> <p>html</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h3&gt;Header to the 3rd degree!&lt;/h3&gt;&lt;/header&gt; &lt;section class="textboxes"&gt; &lt;input type="textbox" class="duplicate" /&gt; &lt;/section&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>javascript</p> <pre><code>$(function(){$('.duplicate').attr('onclick', 'createInputBox()'); }); function createInputBox(){ var inputs = $('.duplicate'); var lastInput = inputs[inputs.length - 1]; var position = getAbsolutePosition(lastInput); var x = position[0]; var y = position[1] + 25; $('.textboxes').append(inputTextBoxOpenTag + "style=\"position:absolute; left:" + x + "px; top:" + y + "px;\"&gt;" + inputTextBoxCloseTag ); } function getAbsolutePosition(object){ var curleft = curtop = 0; if(object.offsetParent){ do{ curleft += object.offsetLeft; curtop += object.offsetTop; } while(object = object.offsetParent); return [curleft, curtop]; } } var inputTextBoxOpenTag = "&lt;input type=\"textbox\" class=\"duplicate\" onclick=\"createInputBox()\" " var inputTextBoxCloseTag="&lt;/input&gt;" </code></pre> <p>So the basic idea is every time you click in a text box, a new one is added below the last textbox.</p> <p>The new textbox position is set using the current position of the last textbox. After debugging in chrome, I could see that the horizontal position, x, was being set to the actual value I wanted. However, when the function was called again, it claimed that the actual position was 2 pixels greater than what it had set it to in the last function call.</p> <p>Though this page obviously isn't meant to be used for anything important, I feel knowing what is causing this issue may give me more information on why chrome is displaying some textboxes on another site I'm working on out of line, while firefox and ie9 display them just fine.</p> <p>Thanks again for your help!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USWet Noodles
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POTwo pixels added to absolute position of elements added via javascript in chrome only
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIs this the complete code, or is there CSS styles we should know about? I haven't been able to reproduce the behavior in chrome, based on the code you've provided so far. [Working example](http://jsfiddle.net/NKPB8/).
      singulars
      1. POTwo pixels added to absolute position of elements added via javascript in chrome only
      1. USDavid Hedlund
    2. CONo, this is all there is, but given that info, I may want to try testing on a different machine. Thanks!
      singulars
      1. POTwo pixels added to absolute position of elements added via javascript in chrome only
      1. USWet Noodles
    3. CO[Here's a simplified version of your code](http://jsfiddle.net/WNV6G/) btw. You don't have to access index to find the last element, you can use the `:last` pseudo-selector. You don't have to have the HTML in string variables, you can create a copy with `clone()`. You don't have to roll your own function to find out an elements position relative to its offset parent, you can use `offset()` (see the documentation for differences between that and `position()`).
      singulars
      1. POTwo pixels added to absolute position of elements added via javascript in chrome only
      1. USDavid Hedlund
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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