Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Approach #1: Flexbox</h2> <blockquote> <p>The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommandation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). -- from <a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer"><strong>css-tricks</strong></a></p> </blockquote> <p>So using the flex box I came up with this <strong><a href="http://jsfiddle.net/danield770/DVAcV/181/" rel="nofollow noreferrer">FIDDLE</a></strong></p> <p>Markup:</p> <pre><code>&lt;div class="container"&gt; &lt;div class="header"&gt; &lt;h1&gt;Title&lt;/h1&gt; &lt;nav&gt; &lt;/nav&gt; &lt;/div&gt; &lt;div class="content"&gt;content&lt;/div&gt; &lt;footer&gt;footer&lt;/footer&gt; &lt;/div&gt; </code></pre> <p>Relevant CSS:</p> <pre><code>.content { flex: 1; overflow: auto; } </code></pre> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin: 0; padding: 0; } html, body { height: 100%; } .container { height: 100%; display: flex; flex-direction: column; } .header, .content, footer { width: 100%; } .header { background: yellow; } .content { background: pink; flex: 1; overflow: auto; } footer { background: gray; height: 80px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt; &lt;div class="header"&gt; &lt;h1&gt;Title&lt;/h1&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Btn&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Btn&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Btn&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Btn&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Btn&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Btn&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Btn&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Btn&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt; &lt;div class="content"&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. &lt;/div&gt; &lt;footer&gt;footer&lt;/footer&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>A few points to mention:</p> <p>1) I only apply flex:1 (ie flex: <strong>1</strong> 1 auto) to the scrollable content; the other items can have a fixed or dynamic height.</p> <p>2) Support for flexbox is surprisingly good in modern browsers (see <strong><a href="http://caniuse.com/flexbox" rel="nofollow noreferrer">here</a></strong>) but you will need to add some browser specific css to get this working for some older browsers.</p> <p>3) For older versions of firefox additional CSS was necessary for this to work. I have since edited them out of the answer, but you can see all that in the history of this answer. </p> <h2>Approach #2 CSS-tables (not cross-browser)</h2> <p>Because you need the header to be dynamic, I initially thought of <code>css tables</code> to do the job.</p> <p><strong><a href="http://jsfiddle.net/danield770/GumPE/1/" rel="nofollow noreferrer">FIDDLE1</a></strong> <strong><a href="http://jsfiddle.net/danield770/GumPE/2/" rel="nofollow noreferrer">FIDDLE2</a></strong></p> <p>So the first row will contain the h1 and nav,</p> <p>and the second row will take up the rest of the window.</p> <p>The footer has a fixed height and has position fixed. </p> <p>...The only problem with this is that I don't think there is a way to do this cross-browser. So as far as I know this approach only works on Chrome and the new opera. The problem is getting scrollbars within the table row. (See <strong><a href="https://stackoverflow.com/a/5602455/703717">this post</a></strong>) </p>
    singulars
    1. This table or related slice is empty.
    1. POResponsive elements with dynamic content - Making just one element scroll
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USDanield
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POResponsive elements with dynamic content - Making just one element scroll
      singulars
      1. PTQuestion
    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. VTUpMod
    1. CO@sanjaypoizer I edited my answer
      singulars
      1. PO
      1. USDanield
    2. CO+1 for the answer, but it's probably better to just use JavaScript rather than limit the use of which browser you can use.
      singulars
      1. PO
      1. USWex
    3. COAs 'flex' is pretty much certain to be a standard very soon, and there's some backwards compatibility there with the prefixes, I'll be going with this one. I really don't want to be resorting to Javascript for layouts. Thanks very much for a great answer.
      singulars
      1. PO
      1. USsanjaypoyzer
 

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