Databases
StackOverflow2013
Postsdbo
POCSS Layout Questions (Table like layout with dynamically sized cells)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Layout Questions (Table like layout with dynamically sized cells)
    primarykey
    data
    text
    <p>Hy there,</p> <p>I need to build a layout that looks something like this: <img src="https://i.stack.imgur.com/OU1t9.png" alt="Layout"></p> <p>The requirements are the following:</p> <ul> <li>Every row has 3 cells</li> <li>The width of left &amp; right cells is not known and adjusts to their content</li> <li>The middle cell should always take the remaining space and should adjust it's height according to it's content automatically</li> <li>The left cell should always have the same height as it's containing div (row) which is again given by the height of the middle cell (100 % height)</li> </ul> <p>I've already managed to accomplish the first 3 points with this setting:</p> <ul> <li>Left div: float left</li> <li>Right div: float right</li> <li>Center div: overflow: hidden</li> <li>Important: The right div has to be declared BEFORE the center div in the markup to work</li> </ul> <p>The problem is that i can't think of any way to make the left cell always the same height as the row respectively the center cell. 100 % height doesn't work because of it's floating state...</p> <p>Example code and <a href="http://jsfiddle.net/HV2vh/7/" rel="nofollow noreferrer">working testcase</a>:</p> <p>HTML:</p> <pre><code>&lt;div class="outer"&gt; &lt;div class="row"&gt; &lt;div class="inner left"&gt;xxxxxxx&lt;/div&gt; &lt;div class="inner right"&gt;yyyyyyy&lt;/div&gt; &lt;div class="inner middle"&gt;Lorem ipsum dolor sit&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="inner left"&gt;xxx&lt;/div&gt; &lt;div class="inner right"&gt;yyyyyyyyyyy&lt;/div&gt; &lt;div class="inner middle"&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="inner left"&gt;xxxxxxxxxxxxxxxxxxx&lt;/div&gt; &lt;div class="inner right"&gt;yyy&lt;/div&gt; &lt;div class="inner middle"&gt;Lorem ipsum&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.outer { width: 500px; } .row { width: 100%; border: 1px solid black; } .inner { min-height: 24px; } .inner.left { background-color: yellow; float: left; } .inner.middle { background-color: red; overflow: hidden; } .inner.right { background-color: green; float: right; } </code></pre> <p>I'd really appreciate any help with this!</p> <p>Thanks in advance!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsuamikim
    1. USsuamikim
    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. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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