Databases
StackOverflow2013
Postsdbo
POElements position changing after setting position to absolute
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POElements position changing after setting position to absolute
    primarykey
    data
    text
    <p>I have run into a pretty weird problem that I have managed to fix, but in a disgusting way.</p> <p>I have the following working code that grabs the left and top of the element (using MooTools). It then uses <code>setStyles</code> to copy these measured coordinates into the style attribute. This works pretty well.</p> <p>But as soon as I set the position to absolute the values in the code above it appear to change.</p> <p><strong>Works but horrible:</strong></p> <pre><code>var Sortable = new Class({ initialize: function(element, container) { // Store the element and its settings this.element = element; this.size = element.getSize(); this.position = element.getPosition(container); // Set the position element.setStyles({ left: this.position.x, top: this.position.y }); setTimeout(this.goAbsolute.bind(this), 0); }, goAbsolute: function() { this.element.setStyle('position', 'absolute'); } }); </code></pre> <p>As you can see, I am using a timeout to separate the left / top setting and the position setting. The following code does not work.</p> <pre><code>var Sortable = new Class({ initialize: function(element, container) { // Store the element and its settings this.element = element; this.size = element.getSize(); this.position = element.getPosition(container); // Set the position element.setStyles({ left: this.position.x, top: this.position.y, position: 'absolute' }); } }); </code></pre> <p>So, we can use this.</p> <pre><code>this.size = element.getSize(); </code></pre> <p>And <code>size.x</code> will equal 100 for example. Then with this added line.</p> <pre><code>this.size = element.getSize(); element.setStyle('position', 'absolute'); </code></pre> <p><code>size.x</code> will now equal 0. Even though it was set to absolute after.</p> <p>I have tried cloning the object and its values.</p> <p>I have tried putting them all out of scope of each other.</p> <p>Nothing seems to work.</p> <p>Does anyone know of a way to do a similar fix but without <code>setTimeout</code>? Or is that the best way.</p> <p>I have tried to explain my problem as best as I can but it is a bit of a strange one. So comment with any questions.</p> <p>Thank you for any suggestions you may have.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USOlical
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POElements position changing after setting position to absolute
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POElements position changing after setting position to absolute
      1. USstealthyninja
      1. VTFavorite
    3. VO
      singulars
      1. POElements position changing after setting position to absolute
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCare to provide any html this code should be working on ? And how does this sortable function get called ?
      singulars
      1. POElements position changing after setting position to absolute
      1. USWTK
 

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