Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is easy because <strong>most percentage values are relative to the viewport</strong> so it can be done with normal HTML/CSS.</p> <p>You just need to define for every object some relative values of width and height in CSS, something like <code>width:30%; height:30%;</code></p> <p>But you can't place the object with absolute values, because otherwise they're moving. So you also need percentages like <code>left:30%; top:10%;</code>, without forgetting to set the <code>position:relative</code></p> <p>Even more, the marging and padding (and maybe even the border ;) of all the container-divs - even the body - also needs to be relative or zero, otherwise the object would move, too...</p> <p>Here's a working code example with an image (you could also just define another div with percentual sizes instead of the img):</p> <pre><code>&lt;body style="margin:0px; border:0px; padding:0px"&gt; &lt;div style="margin:5%; border:0px; padding:5%"&gt; &lt;img src="my picture.jpg" style="width:30%; height:30%; position:relative; left:30%; top:10%;"&gt; &lt;div&gt; &lt;/body&gt; </code></pre> <p>(Note that the percentages of the picture are always relative to the viewport and have nothing to do with the picture size)</p> <p><strong>UPDATE:</strong></p> <p>I just made some fancy coloumns:</p> <pre><code>&lt;div style="margin:0px; border:0px; padding:2%; width:30%; position:absolute; top:10%; left:5%;"&gt; &lt;div style="margin:0px; border:3px double #000000; padding:2%; width:90%;"&gt;aaa &lt;/div&gt; &lt;/div&gt; &lt;div style="margin:0px; border:0px; padding:2%; width:30%; position:absolute; top:10%; left:35%;"&gt; &lt;div style="margin:0px; border:3px double #000000; padding:2%; width:90%;"&gt;bbb &lt;/div&gt; &lt;/div&gt; &lt;div style="margin:0px; border:0px; padding:2%; width:30%; position:absolute; top:10%; left:65%;"&gt; &lt;div style="margin:0px; border:3px double #000000; padding:2%; width:90%;"&gt;ccc &lt;/div&gt; &lt;/div&gt; </code></pre> <p>In this case the height depends on the content. In a productive environment you should also remove the borders, because they're zooming.</p> <p>If you also want to have constantly sized text, you need to use some javascript function since those new CSS3-relative fonts don't really work well.</p> <p><strong>UPDATE 2:</strong></p> <p>Now I know what you mean: You want to work with absolute values due to the size control of the elements itself.</p> <p>So you need to calculate the needed relative values on the server, and sent them to the client. However this only works with JS, because you need to get browser resolution information from the browser and send them in an XMLHttpRequest to the server. Then you probably use innerHTML to build the header, it's the best way to do it (the "Facebook way"). And because you use relative values, all your problems are solved...and the graphics are even much faster than any (other) JS solution.</p> <p>However, you also need a solution for deactivated Javascript on static loading...and then it will still zoom in/out, it's unpreventable. But if there is another way to get the browser viewport than by JS please let me know. ;)</p> <p><strong>P.S.</strong> <em>Since I was getting many downvotes for this post, any comments from the downvoters are most appreciated, thx.</em></p>
    singulars
    1. This table or related slice is empty.
    1. POUpon scaling, fix the size for specific element
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMarcus
    1. USMarcus
    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. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTDownMod
    1. COI know that this is a valid approach, and it's also the simplest solution I can think of, but I was asking for a simpler solution. It might not exist, but this still isn't what I'm looking for.
      singulars
      1. PO
      1. USOvercode
    2. COActually, my solution is indeed quite simple. It's much more simpler than doing it in pure JS (think of all the debugging and cross-browser issues). You just need to learn how to do a XMLHttpRequest and load the returned string via innerHTML (this is only "almost AJAX" because pure AJAX is only with XML, nowadays being replaced by JSON...but you don't even need those data formats, you can just get pure HTML and update the page with innerHTML).
      singulars
      1. PO
      1. USMarcus
    3. COThis solution isn't simple when I have hundreds of divs. But that aside, like I said, it works, and I know it does, but I was just asking to see if there was anything simpler.
      singulars
      1. PO
      1. USOvercode
 

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