Cant get text to overlay correctly in Masonry

Wappler General Need Help
1

I’m following docs here:

one thing that doesn’t follow in the docs is it says to add a Title for the text element. I see no Title, so I’m adding a Heading.
And the docs make no mention of creating a new style, but I had to.

The text just isn’t in the right position.
Live here: http://137.184.106.209/vehicle_images

And in my <h4> line, I don’t understand the need to BIND to a field , if I can use {{vehslug}} without the bind and it still displays the text.

2

Your layout is a bit wrong:

<div is="dmx-masonry" id="masonry1" dmx-bind:repeat="sc.data.vehicles_all">
    <img class="img-fluid" dmx-lazyload-dynamic="" dmx-bind:data-src="image1">
    <h4 dmx-bind:title="vehslug" class="style3">{{vehslug}}</h4>
</div>

You need to wrap the image and heading in some containing element.

This should become something like:

<div class="row" is="dmx-masonry" id="masonry1" dmx-bind:repeat="sc.data.vehicles_all">
    <div class="col">    
        <img class="img-fluid" dmx-lazyload-dynamic="" dmx-bind:data-src="image1">
        <h4 dmx-bind:title="vehslug" class="style3">{{vehslug}}</h4>
    </div>
</div>

Also dmx-bind:title="vehslug" should not be applied to the heading.

1 Like