Databases
StackOverflow2013
Postsdbo
POCreate grids with arbitrary columns counts in different responsive layouts
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreate grids with arbitrary columns counts in different responsive layouts
    primarykey
    data
    text
    <p>I have an Rails app I am building with Foundation. I am having trouble figuring out how to display an arbitrary number of columns per row and keep it responsive in the small/medium/large layouts.</p> <p>For example, lets say I have a model <code>Department</code> which has many <code>Employees</code>. I am trying to build the department page and display a list of the employees in the department. One department may have 10 employees. Another may have 6. It's arbitrary. </p> <p>I want to do 4 columns in <code>large</code>, 2 columns in <code>medium</code> and 1 column in <code>small</code>. (See my wireframe below). However, the columns need to be wrapped in a <code>div.row</code>. This requirement means I have either of the following two situations:</p> <ul> <li><strong>Case #1</strong> (<a href="http://jsfiddle.net/ag3Ys/" rel="nofollow noreferrer">jsfiddle</a>) I have 2 elements per row and the <code>large</code> layout only gets 2 elements because it is getting cleared by the <code>.row</code>.</li> <li><strong>Case #2</strong> (<a href="http://jsfiddle.net/jeffrod/YQ33R/1/" rel="nofollow noreferrer">jsfiddle</a>) I have 4 elements per row and the columns don't clear properly when in the 2-column, <code>medium</code> layout because there are 4 in a row.</li> </ul> <p>This seems like it should be a pretty standard situation but I cant seem to figure it out. How do I do this? Is Foundation the wrong tool?</p> <p><img src="https://i.stack.imgur.com/hFB9H.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJeff
    1. USJeff
    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. COLook into something like Masonry.js (http://masonry.desandro.com/)
      singulars
      1. POCreate grids with arbitrary columns counts in different responsive layouts
      1. USomarvelous
    2. COI've seen masonry before. I'd prefer to exhaust all options with Foundation before I add another library. This seems like something Foundation should be able to handle.
      singulars
      1. POCreate grids with arbitrary columns counts in different responsive layouts
      1. USJeff
    3. COAlso, I dont necessarily care if the vertical alignment is micromanaged (a la masonry), as long as the floats are cleared properly.
      singulars
      1. POCreate grids with arbitrary columns counts in different responsive layouts
      1. USJeff
 

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