Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>The problem</strong>: When you set position:fixed, the width of the <code>masthead</code> becomes the size of the elements inside by default. Usually you would be able to declare <code>width:100%</code> on the <code>masthead</code> so it stretches the entire width of the parent div, but in this case, setting percentage width on the fixed element makes it calculate based on the width of the <em>viewport</em>: see here for more details: <a href="https://stackoverflow.com/questions/4674562/percentage-width-for-fixed-elements">Percentage width for fixed elements?</a> </p> <p>Since the rest of the content has a <code>max-width</code> of 700px, we can set the width of the <code>masthead</code> to also be 700px but the issue is when you shrink the viewport, the rest of the page will shrink but the <code>masthead</code> won't. Setting <code>max-width</code> on the masthead doesn't work because its original width is less than 700px. </p> <pre><code>.masthead { position: fixed; width: 700px; top: 0; background-color: white; border-bottom: 2px solid rgb(220,220,220); } </code></pre> <p>Note that we set the background to white otherwise the bar will by default have a transparent background and the elements underneath will just intersect -- very ugly. We set the <code>top</code> property to 0 so it is now attached to the top of the page and doesn't leave a gap when we scroll.</p> <p>(The border I added was just for looks, you can remove that if you'd like.)</p> <p>Since we set the <code>masthead</code> to <code>fixed</code> positioning, it is now removed from the page flow, so everything else in the page acts like the <code>masthead</code> wasn't there. That leads to an issue: everything in the page shifts up, and one of the <code>&lt;hr /&gt;</code>s on the top becomes hidden. To solve this, we add a <code>margin-top: 50px;</code> to the top <code>&lt;hr /&gt;</code>, and everything is shifted downwards.</p> <p>Due to the default margin styling (<code>margin-bottom: 20px; margin-left: 0;)</code> on <code>.nav</code>s in bootstrap the "Home About Contact" section ends up looking a bit awkward. We fix this by setting the margins to something more appropriate: <code>margin: 14px 0;</code></p> <p><strong>Quick Note</strong>: I applied all these styles as inline in the chrome web inspector, so that they would override any other properties</p> <p><strong>Edit</strong>: Actually, it works nicely too if you just delete the HR from the document with the web inspector</p>
    singulars
    1. This table or related slice is empty.
    1. POHow to make navbar fixed in Bootstrap?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USZhanger
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to make navbar fixed in 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. COTHANK YOU! Worked great and it was a perfect explanation. You are a God among men.
      singulars
      1. PO
      1. USKevin
 

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