Databases
StackOverflow2013
Postsdbo
POIsotope objects with custom css margins based on child-nth and js
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIsotope objects with custom css margins based on child-nth and js
    primarykey
    data
    text
    <p>I have been doing simple .isotope gallery and this is how it looks with selected #portfolio-wrap containter in chrome dev tools:</p> <hr> <p>I couldn't upload three links so you have to go back here:<br/> --> <a href="https://imgur.com/a/dSQ6v" rel="nofollow noreferrer">Gallery - check image 1</a> &lt;--</p> <hr> <p>Every .isotope object (a circle with text) has</p> <pre><code>margin: 0 10px 0 10px; </code></pre> <p>Like on the screen:</p> <p>--> Check image 2 now &lt;--</p> <p><strike> There are four objects in the row. What I want is no margins for left and right side of first and fourth item so that every one is sticking to "walls" of parent body container. </strike> Edit:<br/> Every item should have bottom margin of 20px and every item except 1,5,9 or in other words 4n+1 should also have left-margin of 20px. So they will nicely stack. <a href="https://www.imgur.com/nusu8n0" rel="nofollow noreferrer">image</a></p> <p>So I have tried with <code>nth-child</code>:</p> <pre><code>#portfolio-wrap &gt; div:nth-child(4n+1) { margin: 0 0 20px 0; } </code></pre> <p>But it makes isotope act buggy as seen below. The red numbers are consecutive child numbers as they should appear according to code without filtering:</p> <p>--> Check image 3 now &lt;--</p> <p>The first and fifth children have their margin applied good. And everything would be well if not two things:</p> <ol> <li>After filtering the applied margin is not changing.</li> <li>The position bug, as on last imgur link.</li> </ol> <p>ad. 1<br/> I have found a js solution to one problem and it works partially for me: <a href="https://stackoverflow.com/questions/11677827/css-nth-child2n1-repaint-css-after-filtering-out-list-items">Stackoverflow - click</a> When I apply the 4n+1 code it doesnt work, whats wrong? (I'm not really any good with js)</p> <pre><code>var x=0; $('.portfolio-item:not(.isotope-hidden)').each(function(){ for (x=4*x+1; x&lt;=50; x++ ) { $(this).css('margin','0 0 20px 0') } else { $(this).css('margin','0 0 20px 20px') } }) </code></pre> <p>ad. 2<br/> I don't know what causes the alignment bug. I thought that could be too much margins destroying wrapper, but it is not the case.</p> <h1>Update for everybody:</h1> <p>I have fixed my js and it works!:</p> <pre><code>$('.portfolio-item:not(.isotope-hidden)').each(function()) { for (x = 1; x &lt;= 50; ++x) { if ((x - 1) % 4 == 0) { $(this).css('margin','0 0 20px 0') } else { $(this).css('margin','0 0 20px 20px') } }} </code></pre> <p>Layout bug is still bugging as on image3!</p> <p>Also js after filtering is not applying new margin... :(</p> <h1>Update 2:</h1> <p>I have resolved the problem by applying gutterWidth (see isotope manuals) also you not only need apply gutterwidth but also long stack of code from demo of gutterwidth from source. Shame on you isotope documentation. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USPiotr Uchman
    plurals
    1. PL
      singulars
      1. LTLinked
    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. COPlease show your html and css. By the way, are you really looking forward for a bottom margin of 20 px for the first end every 4th element onwards? Like t this 1,5,9,etc..
      singulars
      1. POIsotope objects with custom css margins based on child-nth and js
      1. USFico
    2. COEvery item must have bottom margin of 20px, and every item except of 1,5,9 etc has to have left maring of 2px. Like here: http://imgur.com/nusu8n0 I will edit js css because it should be 0 0 20px 0; not 0 0 0 20px;. Its wordpress and it will be hard to show code, so maybe specify what part do you want? :)
      singulars
      1. POIsotope objects with custom css margins based on child-nth and js
      1. USPiotr Uchman
    3. CORead my answer below. Your jscript code is not correct. In your question you stated that "Every .isotope object (a circle with text) has margin: 0 10px 0 10px; "
      singulars
      1. POIsotope objects with custom css margins based on child-nth and js
      1. USFico
 

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