Develop Reference

I am creating css flip cards for projects using Django template tags to iterate over the cards. All of the buttons only flip the first card

As it says in the title. I know Django well, but am still getting the hang of using JS for this type of thing. I am iterating over the cards with {% for project in projects %}, and everything is showing up as it should. And, when I click the button on the first card, it flips the card perfectly. However, when I click the button of any other card, they also flip the first card as well, instead of flipping the next card itself. I think it has something to do with the id of the divs or labels, and have tried a few things but I haven't quite figured it out.
Here is the necessary HTML:
<div class="wrapper">
{% for project in projects %}
<div class="card">
<input type="checkbox" id="card1" class="more" aria-hidden="true">
<div class="content">
<div class="front"
style="background-image: url({{ project.image }})">
<div class="inner">
<h2>{{ project.title}}</h2>
<label for="card1" class="button" aria-hidden="true">
Details
</label>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
</div>
<div class="description">
<p>{{ project.description }}</p>
</div>
<div class="location">Warsaw, Poland</div>
<div class="price">38€ / day</div>
<label for="card1" class="button return" aria-hidden="true">
<i class="fas fa-arrow-left"></i>
</label>
</div>
</div>
</div>
</div>
{% endfor %}
The CSS pertaining to the cards:
<style>
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
width: 420px;
height: 340px;
margin: 1em;
perspective: 1500px;
}
.card .content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.more:checked ~ .content {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 6px;
}
.front .inner,
.back .inner {
height: 100%;
display: grid;
padding: 1.5em;
transform: translateZ(90px) scale(0.75);
}
.front {
background-color: #fff;
background-size: cover;
background-position: center center;
}
.front:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
backface-visibility: hidden;
background-image: url("{{ project.image }}");
}
.front .inner {
grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
justify-items: center;
}
.front h2 {
grid-row: 2;
margin-bottom: 0.3em;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
font-weight: 500;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.front .rating i {
margin: 0 1px;
}
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 2px solid #f0f0f0;
}
.back .inner {
grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
grid-template-columns: repeat(3, auto);
grid-column-gap: 0.8em;
justify-items: center;
}
.back .info {
position: relative;
display: flex;
align-items: center;
color: #355cc9;
grid-row: 3;
}
.back .info:not(:first-of-type):before {
content: "";
position: absolute;
left: -0.9em;
height: 18px;
width: 1px;
background-color: #ccc;
}
.back .info span {
font-size: 2em;
font-weight: 700;
}
.back .info i {
font-size: 1.2em;
}
.back .info i:before {
background: linear-gradient(40deg, #355cc9, #438af3);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.back .info .icon {
margin-left: 0.3em;
}
.back .info .icon span {
display: block;
margin-top: -0.25em;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
}
.back .description {
grid-row: 5;
grid-column: 1/-1;
font-size: 0.86em;
border-radius: 5px;
font-weight: 600;
line-height: 1.4em;
overflow: auto;
color: #355cc9;
padding-right: 10px;
}
.back .location,
.back .price {
font-weight: 600;
color: #355cc9;
grid-row: 1;
font-size: 0.86em;
}
.back .location {
grid-column: 1/3;
justify-self: left;
}
.back .price {
grid-column: 3/-1;
justify-self: right;
}
.back .button {
grid-column: 1/-1;
justify-self: center;
}
.button {
grid-row: -1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
display: block;
padding: 0 1.5em;
height: 3em;
line-height: 2.9em;
min-width: 3em;
background-color: transparent;
border: solid 2px #fff;
color: #fff;
border-radius: 4px;
text-align: center;
left: 50%;
backface-visibility: hidden;
transition: 0.3s ease-in-out;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: none;
color: #355cc9;
}
.button.return {
line-height: 3em;
color: #355cc9;
border-color: #355cc9;
text-shadow: none;
}
.button.return:hover {
background-color: #355cc9;
color: #fff;
box-shadow: none;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #859ddf;
}
::-webkit-scrollbar-thumb:hover {
background: #355cc9;
}
</style>
And the javascript (I had a different jquery script at one point but this is what I've got now:
(function () {
var tab = document.querySelector('.card');
document.getElementById('card1').addEventListener('click', function () {
tab.classList.add('back');
}, false);
document.getElementById('card1').addEventListener('click', function () {
tab.classList.remove('front');
}, false);
})();
</script>
I'm not sure if anything else would be helpful, but if anybody has a good idea of what may be going on it would be incredibly helpful. This is the only snag I've hit where I've had to ask a question for my last few projects. It's just annoying. Thanks.

The reason why all buttons only flip the first card is just because your id is hardcoded with "card1", the id's value on html should be unique. The "card1" id is only targetting the first element that use the same id
<input type="checkbox" id="card1" class="more" aria-hidden="true">
You should generate dynamic id for each iteration, so for example you could generate the ids value with "card1", "card2", "card3", etc.
Same with the js
document.getElementById('card1').addEventListener('click', function () {
tab.classList.add('back');
}, false);
document.getElementById('card1').addEventListener('click', function () {
tab.classList.remove('front');
}, false);
You should create dynamic event listener for each id
See how the html id works on HTML id

So, after Dhia Aziz Rizqi confirmed my suspicion that it was, in fact, the ID that was the issue; and there wasn't any other underlying issue,I immediately went to try and dynamically call the project ID with Django inside the JS function. It worked perfectly.
I hadn't used Django template tags inside of a JS function before, so I wasn't sure how it would go, but for anyone else who happens to come across this issue...
The javascript needed to change to this:
<script>
(function () {
var tab = document.querySelector('.card');
document.getElementById('{{ project.id }}').addEventListener('click', function () {
tab.classList.add('back');
}, false);
document.getElementById('{{ project.id }}').addEventListener('click', function () {
tab.classList.remove('front');
}, false);
})();
</script>
And the HTML to this:
<div class="wrapper">
{% for project in projects %}
<div class="card">
<label for="{{ project.id }}"></label><input type="checkbox" id="{{ project.id }}" class="more" aria-hidden="true">
<div class="content">
<div class="front"
style="background-image: url({{ project.image }})">
<div class="inner">
<h2>{{ project.title}}</h2>
<label for="{{ project.id }}" class="button" aria-hidden="true">
Details
</label>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
</div>
<div class="description">
<p>{{ project.description }}</p>
</div>
<div class="location">Warsaw, Poland</div>
<div class="price">38€ / day</div>
<label for="{{ project.id }}" class="button return" aria-hidden="true">
<i class="fas fa-arrow-left"></i>
</label>
</div>
</div>
</div>
</div>
{% endfor %}
The solution was to simply add the project ID dynamically in place of a fixed ID.
It works wonderfully with Django.

All the elements disappear when I click on one of them, but only need the elements that I haven't clicked on to disappear

I want all the other elements(that I haven't clicked on) to disappear when I click on one of them, but instead all of them disappear. Here's the Javascript Code:
$(".content-toggler").click(function() {
let elTriggered = $(this);
elTriggered.parent().toggleClass("expand");
$(".content-toggler").each(function(index, element) {
if ($(element) === elTriggered) {
console.log("Passing on the clicked element...");
} else {
$(element).parent().toggleClass("hide");
}
console.log($(element))
console.log(elTriggered)
});
});
.circular-anim {
display: grid;
align-items: center;
justify-content: center;
margin: 1em auto;
/*With 'auto', you center the element according to the margin*/
margin-top: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 2em;
position: absolute;
background: rgba(0, 0, 0, 0.25);
transition: 1s ease;
}
.content-toggler {
margin: 0;
padding: 0;
border-style: none;
background: #8D9CF4;
width: 175px;
height: 175px;
border-radius: 50%;
position: absolute;
top: 32.5px;
left: 188.5px;
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-content">
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
</div>
By the way, I injected some of the content from the js file and they already work well. Don't be surprised if you see some of the classes missing in the css code.
Why do all my elements disappear even though I want the one that I click on to stay?

Each time you call $() it creates a new jQuery object, and it will not compare equal to another object even if they refer to the same DOM element.
You can just use the .not() function to remove an element from the collection, instead of looping with .each() and comparing.
$(".content-toggler").click(function() {
let elTriggered = $(this);
elTriggered.parent().toggleClass("expand");
$(".content-toggler").not(this).toggleClass("hide");
});
.circular-anim {
display: grid;
align-items: center;
justify-content: center;
margin: 1em auto;
/*With 'auto', you center the element according to the margin*/
margin-top: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 2em;
position: absolute;
background: rgba(0, 0, 0, 0.25);
transition: 1s ease;
}
.content-toggler {
margin: 0;
padding: 0;
border-style: none;
background: #8D9CF4;
width: 175px;
height: 175px;
border-radius: 50%;
position: absolute;
top: 32.5px;
left: 188.5px;
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-content">
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
<div class="circular-anim"><button class="content-toggler"></button></div>
</div>

Checkbox ace.js (online editor)

I am using ace.js and there are some themes. The basic theme is dark theme and I have checkbox that changes themes. But first 2 times, when I click the checkbox, themes are changing, but then, they don't change. The problem is only with themes.
Thanks for your help.
var eh = ace.edit("htmlEditor");
eh.setTheme("ace/theme/monokai");
eh.session.setMode("ace/mode/html");
document.getElementById('htmlEditor').style.fontSize='15px';
var ec = ace.edit("cssEditor");
ec.setTheme("ace/theme/monokai");
ec.session.setMode("ace/mode/css");
document.getElementById('cssEditor').style.fontSize='15px';
eh.getSession().on('change', function() {
update();
})
ec.getSession().on('change', function() {
update();
})
function update() {
var res = document.getElementById('result').contentWindow.document;
res.open();
res.write('<style>' + ec.getValue() + '</style>');
res.write(eh.getValue());
res.close();
}
update();
function showTheme() {
var eh = ace.edit("htmlEditor");
var cbox = document.getElementById('checkbox');
if (cbox.checked == false) {
eh.setTheme('ace/theme/tomorrow.css');
}
else {
eh.setTheme('ace/theme/monokai');
}
}
showTheme();
*{
padding: 0;
margin: 0;
}
#htmlEditor {
height: 100%;
min-height: 50vh;
width: 33%;
display: inline-block;
}
#cssEditor {
height: 100%;
min-height: 50vh;
width: 33%;
display: inline-block;
}
#container {
height: 100%;
width: auto;
white-space: nowrap;
overflow: hidden;
position: relative;
padding: 0 0 0 1%;
}
#result {
min-height: 424px;
position: relative;
}
body {
background-color: #afafaf;
}
#title-of-textarea {
display: flex;
}
#title-css {
margin: auto;
padding-right: 35%;
}
#header-code {
display: flex;
}
.mnu-code {
display: flex;
list-style-type: none;
padding: 0 0 0 2%;
}
.mnu-code li {
padding-left: 5%;
}
#menu-code {
width: 20%;
cursor: pointer;
}
#settings {
margin: 0 0 0 auto;
padding: 0 5% 0 0;
}
#header-code {
padding: 1% 0 1% 0;
}
#set {
cursor: pointer;
}
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
</head>
<body>
</div>
<div id="header-code">
<div id="menu-code">
<ul class="mnu-code">
<li>Проиграть</li>
<li>Сохранить</li>
<li>Поменять вид</li>
</ul>
</div>
<div id="settings">
<span id="set" onclick="openMenu()">Настройки
<p>
<label class="container">One
<input type="checkbox" id="checkbox" checked="" onclick="showTheme()">
<span class="checkmark"></span>
</label>
<p></p>
<p></p>
</span>
</div>
</div>
<div id="container">
<div id="title-of-textarea">
<div id="title-Html">
<h1>HTML</h1>
</div>
<div id="title-css">
<h1>CSS</h1>
</div>
</div>
<div id="htmlEditor"></div>
<div id="cssEditor"></div>
</div>
<iframe id="result" frameborder="0"></iframe>

How to stop/start looping sliders when mouse over the element?

Making slider I've faced one issue. When I hover the buttons under the images (they are labels) the looping of the slider has to stop. And when its out - it backs to looping. Cant understant where I'm wrong. See the code in snippet or in this link.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>

See this JSFiddle for a working example.
However, if you are hoverring for more than the timeout period, then changeto() is not called, you will want to add changeto() to the "mouseleave" handler.
$(document).ready(function(){
var loop = true;
var quantity = $('input[type="radio"]').length;
function changeTo(i) {
setTimeout(function () {
if (loop) {
number = i%(quantity);
$("label").removeClass('active');
$("label:eq(" + number + ")").trigger("click").addClass('active');
changeTo(i+1);
}
}, 2000);
}
changeTo(0);
$( "label" ).on( "mouseover", function() {
loop = false;
$("label").removeClass('active');
$(this).addClass('active').trigger('click');
}).on('mouseout', function(){
loop = true;
changeTo(0)
});
});
* {
box-sizing: border-box;
}
body {
background: #f2f2f2;
padding: 20px;
font-family: 'PT Sans', sans-serif;
}
.slider--block {
max-width: 670px;
display: block;
margin: auto;
background: #fff;
}
.active {
color: red;
}
.image-section {
display: none;
}
.image-section + section {
height: 100%;
width:100%;
position:absolute;
left:0;
top:0;
opacity: .33;
transition: 400ms;
z-index: 1;
}
.image-section:checked + section {
opacity: 1;
transition: 400ms;
z-index: 2;
}
.image-section + section figcaption {
padding: 20px;
background: rgba(0,0,0,.5);
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 18px;
max-width: 50%;
}
.image-window {
height: 367px;
width: 100%;
position: relative;
overflow:hidden;
}
.slider-navigation--block {
display: flex;
border:1px solid;
background: #1D1D1D;
padding: 5px;
z-index: 3;
position: relative;
}
.slider-navigation--block label {
background: #2C2C2C;
padding: 20px;
color: #fff;
margin-right: 7px;
flex: 1;
cursor: pointer;
text-align: center;
position:relative;
display: inline-flex;
justify-content: center;
align-items: center;
min-height:100px;
border-radius: 4px;
text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
font-weight: 600;
}
.slider-navigation--block label.active:before {
content: "";
position: absolute;
top: -11px;
transform: rotate(-135deg);
border: 12px solid;
border-color: transparent #537ACA #537ACA transparent;
left: calc(50% - 12px);
}
.slider-navigation--block label.active{
background-image: linear-gradient(to bottom, #537ACA, #425F9B);
}
.slider-navigation--block label:last-child {
margin-right: 0;
}
img {
max-width: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider--block">
<div class="slider">
<div class="image-window">
<input class="image-section" id="in-1" type="radio" checked name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
<input class="image-section" id="in-2" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext about something else...
</figcaption>
<img src="http://desktopwallpapers.org.ua/pic/201111/1024x600/desktopwallpapers.org.ua-8624.jpg">
</section>
<input class="image-section" id="in-3" type="radio" name="sec-1">
<section>
<figcaption>
Hello, world! This is awesometext again about something else...
</figcaption>
<img src="http://dogavemanzara.weebly.com/uploads/2/3/2/8/23283920/6960961_orig.jpg">
</section>
</div>
<div class="slider-navigation--block">
<label class="active" for="in-1">AION [ру-офф]</label>
<label for="in-2">Perfect World [ру-офф]</label>
<label for="in-3">Lineage 2 [ру-офф]</label>
</div>
</div>
</div>

The angular-isotope + isotope don't works well with my grid

I'm building a site with angular. In the main page and search results page has a recipes feed like a pinterest and I use the jQuery isotope plugin and angular-isotope directives, but I have 2 issues/problems.
In the main page a the grid cells do not have a fixed width, I use the min-width css property.
This is my CSS:
.recipe {
width: $grid-width;
min-height: 325px;
height: auto;
margin: $margin-top 0 $margin-bottom $ditter;
float: left;
position: relative;
border: 1px solid #C3C3C3;
#include border-radius(0 0 5px 5px);
.avatar {
position: absolute;
top: -15px;
width: $grid-width;
margin: 0 auto;
img {
display: block;
margin: 0 auto;
}
}
.image {
width: $grid-width - 2px;
margin: 0 auto;
overflow-x: hidden;
img {
width: $grid-width;
margin: 0 auto;
}
}
.name {
font-family: Times;
font-size: 20px;
font-style: italic;
font-weight: bold;
text-align: center;
}
.recipe-controls {
width: $grid-width;
.star {
font-size: 30px;
margin: 15px;
}
}
}
This is my angular template:
<div id="masonry" class="clearfix" isotope-container>
<div isotope-item>
...
</div>
<div class="controls" isotope-item>
...
</div>
<div class="recipe" ng-repeat="recipe in recipes" isotope-item>
<div class="avatar text-center">
<a href="">
<img class="img-circle" ng-src="http://graph.facebook.com/bruno.egermano/picture?type=normal" alt="">
</a>
</div>
<div class="image">
<a href="" ng-click="openRecipe(recipe.id)">
<img ng-src="{{recipe.image}}" alt="{{recipe.name}}">
</a>
</div>
<div class="name">
{{recipe.name}}
</div>
<div class="recipe-controls">
<i class="glyphicon pull-right star" ng-class="{'glyphicon-star-empty': !recipe.star.stared, 'glyphicon-star': recipe.star.stared}">
{{recipe.star.count}}
</i>
</div>
</div>
And that is my screenshoot, the circles is the problems I got.
In this first problem. What am I doing wrong?
The second problem, in the search result page, I have a filters, when the users change one of theirs, I call a ajax request and reload the collection.
When its occurs the isotope put all the items on one another, like that:
The SCSS is the same and the HTML is much similar like the other problem.

I found my mistake in the first problem.
I forgot to set the height of my image and the container.
Now, my SCSS looks like that:
.recipe {
width: $grid-width;
height: auto;
margin: $margin-top 0 $margin-bottom $ditter;
float: left;
position: relative;
border: 1px solid #C3C3C3;
#include border-radius(0 0 5px 5px);
.avatar {
position: absolute;
top: -15px;
width: $grid-width;
margin: 0 auto;
img {
display: block;
margin: 0 auto;
}
}
.image {
width: $grid-width - 2px;
height: 235px;
margin: 0 auto;
overflow-x: hidden;
img {
width: $grid-width;
margin: 0 auto;
}
}
.name {
font-family: Times;
font-size: 20px;
font-style: italic;
font-weight: bold;
text-align: center;
}
.recipe-controls {
width: $grid-width;
.star {
font-size: 30px;
margin: 15px;
}
}
}
But the second problem is still happening.