Databases
StackOverflow2013
Postsdbo
POGet actual width and height of a component
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGet actual width and height of a component
    primarykey
    data
    text
    <p>We're facing a fairly scary issue in JavaScript that none of us seems to be quite capable of resolving: </p> <p>How do we get the width and height of a DOM element, including children, entire box model etc. without the component actually being displayed on the page?</p> <p>Remember: I'm looking for suggestions. Even answers which don't answer the question fully (or don't quite fit with the specified parameters) might, and probably will, be helpful.</p> <p>Main goal: I'm adding HTML elements into the page via Javascript - HTML elements with sizes and styles from a database. Problem is that they misbehave, usually bad aligment, one element is larger than another due to padding/margin whatever, and so I need to check their actual size to fix these issues.</p> <p>The resulting application is going to be a, as BigMacAttack has described it in the comments, a 'tightly knit mosaic of 3rd-party HTML controls' would pretty much be spot-on. It needs to look a lot like full-fledged desktop application, and HTML seems to hate the idea with passion. Not that I blame it.</p> <p>Anyway, here's some example code:</p> <p>JavaScript:</p> <pre><code>function exampleElement(caption, content) { this.caption = caption; this.content = content; this.rootElement = document.createElement("div"); } exampleElement.prototype.constructElement = function() { var otherElement = document.createElement("p"); this.rootElement.className = "exampleElement"; this.rootElement.textContent = this.caption; otherElement.className = "exampleP"; otherElement.textContent = this.content; this.rootElement.appendChild(otherElement); /*I need to know size of the otherElement here*/ /*here goes code adding stuff into rootElement*/ }; window.onload = function() { var ex = new exampleElement("Hello", "Here's text"); ex.constructElement(); document.body.appendChild(ex.rootElement); }; </code></pre> <p>CSS:</p> <pre><code>.exampleElement { padding: 5px; margin: 6px; } .exampleElement .exampleP { padding: 20px; margin: 6px; } </code></pre> <p><a href="http://jsfiddle.net/a8Jst/1/">A fiddle</a></p> <p>Now, we need our page to dynamically react to size of the window and to contents of individual components, that's why it's important to be able to get size of an object before even displaying it. It's also important that creation of an object is clearly separated into three phases:</p> <ul> <li><p>creation via new</p></li> <li><p>construction of DOM tree (constructElement)</p></li> <li><p>addition into the document (either directly into body or into another DOM tree)</p></li> </ul> <p>It's important that we know sizes of individual elements during the construction phase.</p> <p>So far we've tried measuring it via jQuery, DOM width and height attributes, but none of that works with DOM object not being directly displayed on page. Another approach I have tried were several functions adding the object into document.body, getting width and height, and then immediately removing it - however, since our CSS files are very specific, this is unreliable unless you insert the entire rootElement, which will be a terrible performance and memory hog as our components get fairly complex.</p> <p>I suppose an approach of dropping .CSS files completely and defining styles directly trough JS would solve at least part of our predicament, but there has to be a better way.</p> <p>Starting bounty to get more ideas and suggestions. Just shoot people, even if answer is not entirely within the boundaries of the question (how would/did you do it etc.) - the goal I'm trying to achieve is for my JS generated HTML controls to properly fit together.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USFenixp
    1. USFenixp
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGet actual width and height of a component
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POGet actual width and height of a component
      1. USFenixp
      1. VTBountyStart
    3. VO
      singulars
      1. POGet actual width and height of a component
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWould inserting the object into a hidden `iframe` work?
      singulars
      1. POGet actual width and height of a component
      1. USMathijs Flietstra
    2. CO@Mathijs Flietstra Well I might as well insert it directly into body and get size of its children, problem is that it gets too problematic when it comes to performance (either that or styles don't get applied, take your pick)
      singulars
      1. POGet actual width and height of a component
      1. USFenixp
    3. COCouldn't you have `position:absolute; opacity:0;` and then remove that when you have the sizes?
      singulars
      1. POGet actual width and height of a component
      1. USediblecode
 

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