Forum

Thread tagged as: Error

Sprites on Repeaters

When first assigning a template to a region which uses a repeater there is some sprite weirdness. As seen here:

https://twitter.com/misssevans/status/606763844388683776

Once I Save it sorts itself out.

My template:

<perch:repeater id="service" label="Service">
<hr>
<div class="col-8">
    <img src="<perch:content type="image" id="image" label="Image" />" alt="<perch:content type="text" id="alt" label="Image Description" required="true"/>" />
</div>
<div class="col-16 last">
    <h3><perch:content id="heading" type="text" label="Heading" editor="markitup" html="true"  /></h3>
    <p><perch:content id="content" type="textarea" label="Content" size="xl" editor="markitup" html="true"  /></p>
    <a class="button button--green" href="#">Learn More</a>
</div>
</perch:repeater>
Sarah Evans

Sarah Evans 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Thanks - that's doing the same here, which gives us a good chance of tracking it down.
Mark Melling

Mark Melling 0 points

6 years ago

I'm also seeing this issue with a weird display of the sprite in the left-hand column when first creating a repeater. I'm using Perch 2.8.14. Did you ever get to the bottom of it?

Thanks.
Mark Melling

Mark Melling 0 points

6 years ago

I think the left-hand column of the repeater is being given a class of "icon", which in turn causes the sprite to be applied. After saving the region, that class is no longer applied.

So I fixed this in my case by setting up a UI customisation as described here: https://docs.grabaperch.com/docs/customizing-perch/ui-customizations/

In my custom css file I have this rule:

.repeater .index.icon {
    background-image: none;
}

Here, I'm targeting just the left-hand column in a repeater (.repeater .index) if that column also has the class icon (note no space between .index and .icon).