Databases
StackOverflow2013
Postsdbo
POPositioning problems for a grid of boxes in a containing div
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPositioning problems for a grid of boxes in a containing div
    primarykey
    data
    text
    <p>I'm trying to achieve this effect: <a href="http://codepen.io/chriscoyier/pen/wxdCD" rel="nofollow">http://codepen.io/chriscoyier/pen/wxdCD</a></p> <p>I'm using SASS (.sass syntax) and haml, and while everything works with sass/haml in CodePen after I revise the code, it doesn't operate in the same way when I apply it to my app. I would like the boxes to float in a grid within the containing div <code>#notecardContainer</code></p> <p>Unfortunately I just joined and don't have a reputation score high enough to post a picture, which is rather counter-productive. But here's a link: <a href="https://dl.dropboxusercontent.com/u/6910513/Screen%20shot%202013-09-13%20at%209.36.27%20AM.png" rel="nofollow">Screenshot</a></p> <p>Essentially, the boxes are appearing within the containing div <code>#notecardContainer</code>, but they are severely offset to the right by about 50% the width of the containing div <code>#drawer</code> Also, they are stacking vertically, not horizontally, and they don't flex with change in the screen size. I'm not sure why it works in CodePen but not in my code. </p> <p><strong>SASS</strong>: (NOTE: the indentation MAY not translate correctly to StackOverflow)</p> <pre><code>#drawer width: 680px height: auto margin-left: auto margin-right: auto #notecardContainer width: inherit .ul.box position: relative z-index: 1 overflow: hidden list-style: none li position: relative float: left width: 300px height: 150px padding: 0 border: 1px solid #000 margin: 0 30px 30px 0 background: #fff &amp;:before, &amp;:after content: '' z-index: -1 position: absolute &amp;:after left: auto right: 10px </code></pre> <p><strong>HAML</strong>:</p> <pre><code> #notecardContainer %ul.box %li %li %li </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USleidio
    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. This table or related slice is empty.
    1. VO
      singulars
      1. POPositioning problems for a grid of boxes in a containing div
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you post a link to your page? A screenshot doesn't really say what is going on with your code.
      singulars
      1. POPositioning problems for a grid of boxes in a containing div
      1. USCastro Roy
    2. COI'm working on it locally on a Rails app yet. Any chance you can detect a problem through the code alone?
      singulars
      1. POPositioning problems for a grid of boxes in a containing div
      1. USleidio
    3. CONo way, everything looks ok in the code, so, i recommend you to use some html debugger that will help you, if you are using Mozilla, you can install Firebug, Google Chrome has its own built-in debugger. Using this tools you can make css and html changes on the fly and see the changes immediately.
      singulars
      1. POPositioning problems for a grid of boxes in a containing div
      1. USCastro Roy
 

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