Embedded Content content expands vertically doesn't push the Layout Block that move with Page Bottom

1

I have a Layout block showing on all pages that used to be the footer. I selected the Move with page Bottom and it does its job.

But i have a html snippet from an other server that shows products into an Embedded Content. It works fine, but i selected the “Content expands vertically” and it does ! except it does push the Bottom layout block…

how can i fix that ?

2

Just a thought… Place the Embedded Content in its own Layout Block and see what happens.

3

did, and does the same thing. i also tried with a layout block under it and does the same thing :-/

4

Ok, this is where it gets a bit tricky as you are embedding code into Sitely.

For the most part Sitely fixes down the elements you place. So what about you sort of estimate on the canvas what you see in the browser and setup the space needed on the canvas for the embed to stretch out?

5

it’s dynamic, i can’t. it shows products depending of categories…
i use DIV container, like this :

<div id="xojo-snippet"></div>

<script>
fetch('http://127.0.0.1:8080/contentsnipethandler')
  .then(response => response.text())
  .then(html => {
    document.getElementById('xojo-snippet').innerHTML = html;
  });
</script>

and the content is very simple (i didnt put the css for this presentation):


<div class="container">

    <div class="card"> // this part repeated
        <div class="border">
            <i class="fa fa-heart"></i>
            <img src="http://127.0.0.1:8080/VY0R9aV.jpg">
        </div>
        <div class="central-div">
            <h3>Gubi<br>ABC Smart Watch</h3>
            <i class="fa fa-bookmark"></i>
        </div>
        <div class="price">
            <p>$213.00</p>
        </div>
    </div>

</div>
6

What if you style the div container with a height of 100%?

7

if found the problem, i can’t use a Layout Block, the height is hardcoded when publish, the Embedded Content need to be alone between layoutblock

8

Hello @kanjo :wave:t2:

I can confirm that a layout block on the page can absolutely adjust to the size of its content in real time, even after the page has loaded, and push your footer downward. If I understand correctly, you’re saying that this isn’t happening in your case?

It’s a bit difficult to help without seeing your project, but you should be able to achieve this by placing your code inside a layout block.

9

i found the fix, the embedded needs to be outside a container to extend

1 Like