Databases
StackOverflow2013
Postsdbo
POIssue with Responsive Columns having equal height
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIssue with Responsive Columns having equal height
    primarykey
    data
    text
    <p>Here is my debate, the problem is solved, but I cant figure out why the method used on css-tricks.com didnt work. The only reason I can assume it didnt work was because my columns are responsive.</p> <p>Here is a <a href="http://jsfiddle.net/APmeG/" rel="nofollow">jsfiddle</a> of the problem. </p> <h2>Solution 1 <a href="http://css-tricks.com/fluid-width-equal-height-columns/" rel="nofollow">Nicolas Gallagher</a> Method</h2> <p>Wont work, why. Because my client could at any time add another box (tell me to add another box, or minus a box). So I need my code to be responsive. I took the css off btw, but if you can look and tell me how to make this work, it would be nice. My portion i am stuck at is with selecting of the children of the UL.</p> <pre><code>.pseudo-three-col .col:nth-child(1) { left: 33%; } .pseudo-three-col .col:nth-child(2) { left: -33.3%; } .pseudo-three-col .col:nth-child(3) { left: 0; } </code></pre> <h2>Solution 2 <a href="http://jsfiddle.net/APmeG/1/" rel="nofollow">jQuery</a> solution</h2> <p><a href="http://jsfiddle.net/APmeG/1/" rel="nofollow">Jsfiddle</a> </p> <p>My jQuery captures the height of my Unordered List and applies it to my List items height. Works perfectly. But Im a true CSS developer and dont want to jQuery code things that dont need to be. Time constraints have led to this solution. </p> <pre><code> $(".basic:last-child").show(); // Optimalisation: Store the references outside the event handler: var catheight = $('ul.categories').height(); $('ul.categories li.clearfix').css({"height" : "" + catheight + ""}); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCam
    1. USCam
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POIssue with Responsive Columns having equal height
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POIssue with Responsive Columns having equal height
      1. USDylan Hayes
      1. VTFavorite
    3. VO
      singulars
      1. POIssue with Responsive Columns having equal height
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThere are just somethings that need to be done with javascript, hence why the language was created. CSS is not the best method for everything and can have unpredictable results across browser that don't support certain tags. - I'm sure you know this already though.
      singulars
      1. POIssue with Responsive Columns having equal height
      1. USdjowinz
    2. COIm just so frustrated with seeing a tutorial that tells you how to do something, you do everything that it says, and it doesnt, work, I realize i should have left the CSS on and included in my question, but I think this should have worked without jQuery intervention. Thanks for the reply. +1 to ya
      singulars
      1. POIssue with Responsive Columns having equal height
      1. USCam
 

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