Could not place cross button and title over the image

[changeweb]

I'm using Handlebars.js template. Gridify only works for

 <div class="grid">
  {{#each img in images}}
   <img {{bind-attr src=img.src_path}}>
  {{/each}}
 </div>

But when I tried to use <span> for cross button, gridify doesn't allow the spans over images.

<div class="grid">
   {{#each img in images}}
   <img {{bind-attr src=img.src_path}}>
   <span style="position:absolute;top:0;left:80%;z-index:1;">x</span>
  {{/each}}
 </div>

[hongkhanh]

Hi, you should put your grid item into a container.

{{#each img in images}}

x

{{/each}}

On Thu, Jan 8, 2015 at 9:17 PM, Hasib Mahmud notifications@github.com wrote:

I'm using Handlebars.js template. Gridify only works for

{{#each img in images}} {{/each}}

But when I tried to use for cross button, gridify doesn't allow the spans over images.

{{#each img in images}} x {{/each}}

— Reply to this email directly or view it on GitHub https://github.com/hongkhanh/gridify/issues/3.

[hongkhanh]

As you use absolute position inside grid item, you should put it into a relative container as well.

{{#each img in images}}

x

```

``` {{/each}}

On Fri, Jan 9, 2015 at 8:40 AM, Nguyen Hong Khanh khanh0203@gmail.com wrote:

Hi, you should put your grid item into a container.

{{#each img in images}}

x

{{/each}}

On Thu, Jan 8, 2015 at 9:17 PM, Hasib Mahmud notifications@github.com wrote:

I'm using Handlebars.js template. Gridify only works for

{{#each img in images}} {{/each}}

But when I tried to use for cross button, gridify doesn't allow the spans over images.

{{#each img in images}} x {{/each}}

— Reply to this email directly or view it on GitHub https://github.com/hongkhanh/gridify/issues/3.

[changeweb]

Not working. All cross is positioned in top:0;left:80%;

[hongkhanh]

Gridify only arrange your grid item like pinterest. Basically, you have to create your own style for grid item. You should know how to use relative position and absolute position and absolute position in a relative container.