Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><b>- Another Update -</b></p> <p><strong><em>Since Twitter Bootstrap version 2.0 - which saw the removal of the <code>.container-fluid</code> class - it has not been possible to implement a two column fixed-fluid layout using just the bootstrap classes - however I have updated my answer to include some small CSS changes that can be made in your own CSS code that will make this possible</em></strong></p> <p>It is possible to implement a fixed-fluid structure using the CSS found below and <em>slightly</em> modified HTML code taken from the Twitter Bootstrap <strong><a href="http://getbootstrap.com/2.3.2/scaffolding.html#layouts" rel="noreferrer">Scaffolding : layouts</a></strong> documentation page:</p> <h3>HTML</h3> <pre><code>&lt;div class="container-fluid fill"&gt; &lt;div class="row-fluid"&gt; &lt;div class="fixed"&gt; &lt;!-- we want this div to be fixed width --&gt; ... &lt;/div&gt; &lt;div class="hero-unit filler"&gt; &lt;!-- we have removed spanX class --&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h3>CSS</h3> <pre><code>/* CSS for fixed-fluid layout */ .fixed { width: 150px; /* the fixed width required */ float: left; } .fixed + div { margin-left: 150px; /* must match the fixed width in the .fixed class */ overflow: hidden; } /* CSS to ensure sidebar and content are same height (optional) */ html, body { height: 100%; } .fill { min-height: 100%; position: relative; } .filler:after{ background-color:inherit; bottom: 0; content: ""; height: auto; min-height: 100%; left: 0; margin:inherit; right: 0; position: absolute; top: 0; width: inherit; z-index: -1; } </code></pre> <p>I have kept the answer below - even though the edit to support 2.0 made it a fluid-fluid solution - as it explains the concepts behind making the sidebar and content the same height <em>(a significant part of the askers question as identified in the comments)</em></p> <hr/> <h1>Important</h1> <h2> Answer below is fluid-fluid</h2> <p><b>Update</b> <strong><em>As pointed out by @JasonCapriotti in the comments, the original answer to this question (created for v1.0) did not work in Bootstrap 2.0. For this reason, I have updated the answer to support Bootstrap 2.0</em></strong></p> <p>To ensure that the main content fills at least 100% of the screen height, we need to set the height of the <code>html</code> and <code>body</code> to 100% and create a new css class called <code>.fill</code> which has a minimum-height of 100%:</p> <pre><code>html, body { height: 100%; } .fill { min-height: 100%; } </code></pre> <p>We can then add the <code>.fill</code> class to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:</p> <pre><code>&lt;div class="container-fluid fill"&gt; ... &lt;/div&gt; </code></pre> <p>To ensure that the Sidebar and the Content columns have the same height is very difficult and unnecessary. Instead we can use the <code>::after</code> pseudo selector to add a <code>filler</code> element that will give the illusion that the two columns have the same height:</p> <pre><code>.filler::after { background-color: inherit; bottom: 0; content: ""; right: 0; position: absolute; top: 0; width: inherit; z-index: -1; } </code></pre> <p>To make sure that the <code>.filler</code> element is positioned relatively to the <code>.fill</code> element we need to add <code>position: relative</code> to <code>.fill</code>:</p> <pre><code>.fill { min-height: 100%; position: relative; } </code></pre> <p>And finally add the <code>.filler</code> style to the HTML:</p> <p><b>HTML</b></p> <pre><code>&lt;div class="container-fluid fill"&gt; &lt;div class="row-fluid"&gt; &lt;div class="span3"&gt; ... &lt;/div&gt; &lt;div class="span9 hero-unit filler"&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><b>Notes</b></p> <ul> <li>If you need the element on the left of the page to be the filler then you need to change <code>right: 0</code> to <code>left: 0</code>.</li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POHow to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMy Head Hurts
    1. USMy Head Hurts
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?
      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. VTAcceptedByOriginator
    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. COThanks a lot! This helped a lot! Exactly what I was looking for! Up vote of course :)
      singulars
      1. PO
      1. USpanosru
    2. COI'm confused, I thought you asked for fixed-fluid, not fluid-fluid? (25%-75% I think is Bootstrap's example)
      singulars
      1. PO
      1. USMike
    3. COI just want to point out that while this code was probably great at the time, it does not work in Bootstrap 2.
      singulars
      1. PO
      1. USJason Capriotti
 

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