Databases
StackOverflow2013
Postsdbo
POTwitter Bootstrap - Responsive affix
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwitter Bootstrap - Responsive affix
    primarykey
    data
    text
    <p>I'm using Twitter Bootstrap and I have the following:</p> <pre><code>&lt;div class="row"&gt; &lt;div class="span3"&gt; &lt;div data-spy="affix"&gt; &lt;form&gt; &lt;!-- inputs and stuff --&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- span9 and its contents --&gt; &lt;/div&gt; </code></pre> <p>Bootstrap is correctly applying the affix effect on <code>&lt;div&gt;</code> and it stays still when I scroll down the page. However, once I resize the page to mobile dimensions and bootstrap responsive effects take place (navbar collapsing/objects aligning nicely under each other), the affixed <code>&lt;div&gt;</code> is now on top of other elements of the page and it gets messy. This is happening because <code>.affix</code> has <code>position: fixed</code> which explains it pretty well.</p> <p>Now I went to <a href="http://twitter.github.com/bootstrap/getting-started.html">Bootstrap</a>'s website and resized the page to mobile dimensions, the affixed element (<code>&lt;ul&gt;</code> in their case) starts flowing nicely with the page, taking its natural place without going on top of other elements. I have also noticed that once that happens, the class is changed from <code>affix</code> to <code>affix-top</code>.</p> <p>I'm not sure if this is their customization or if it's part of the framework, because the framework is apparently not behaving the same way. Can anyone elaborate on this? I need to have the same behavior on my <code>&lt;div&gt;</code> where if the page gets resized to mobile dimensions the affixed element takes its natural place.</p> <p><strong>Edit:</strong> My observation is a bit flawed. I noticed that the element on their page initially has <code>affix-top</code> and once I scroll below <code>data-top-offset</code> it changes to <code>affix</code>. It still doesn't explain why my <code>&lt;div&gt;</code> won't render like their <code>&lt;ul&gt;</code> when resized.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAziz Alfoudari
    1. USAziz Alfoudari
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POTwitter Bootstrap - Responsive affix
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POTwitter Bootstrap - Responsive affix
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POTwitter Bootstrap - Responsive affix
      1. USmarkus
      1. VTFavorite
    1. COInteresting question, I'm having similar problems myself. In my case, the affixed sidebar gets wider and overlaps the content. I think generally there is a lack of documentation of this new feature.
      singulars
      1. POTwitter Bootstrap - Responsive affix
      1. USmarkus
    2. CO@markus-tharkun I think my answer may address your issue as well (`width: auto;`).
      singulars
      1. POTwitter Bootstrap - Responsive affix
      1. USSara
 

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