How to get Lightbox thumbnail to move down with the rest of the page objects?

[briancovalt]

I am building a page with several images and compositions on it.  At the top is an accordion, so when you click on it, it expands downward and pushes all my other objects down nicely.  For instance, my Vimeo widgets, my text boxes, images... everything that's below the accordion moves down when you expand the accordion. 

Great.

However, the ONE thing that doesn't move down with the rest of the elements is my Lightbox!

On this page it's a very simple lightbox - actually just one image that I have so when you click on it, the page dims and you see the image larger.

So for this setup I have one trigger thumbnail that I've scaled up to about 900px wide.  The Lightbox action works fine - when you click on the image, the page dims and you see the image larger, just as I want. 
My problem is that when the accordion pushes things down, they overlap with my Lightbox thumbnail because it does not move down with everything else.

I've had no luck with figuring out how to work around this. 
Any ideas?

[fotoroeder]

Could you provide a simple .muse? Just with an accordion and with your lightbox thumbnail?

Is this lightbox thumbnail out of a slideshow? Or a simple composition?

accordion-pushes-down​

Watch this, if you like. Does this help? You can download the file directly from browser.

Uwe

[briancovalt]

Thanks for your reply, fotoroeder.

Yes, that's how the accordion functions; same on my end.

I started building a very simple .muse file to share, but when I did that I found that I wasn't able to replicate my problem!  So with a clean, simple file, things work as they should.

Now I'm trying to figure out what could be different in my more complex .muse file?  No matter what I do, the lightbox thumbnail isn't influenced by the accordion moving down, while everything else is.

[fotoroeder]

Is anything in your file pinned? That could be one reason, that it doesn´t push down.

I had this once, too. It happens also, if the accordion is pinned.

If you are not able to "unpin" it, so that it pushes down content, you must do the accordion from scratch (I had this too).

Something is pinned by default to the left, what you may see greyed out, when a panel is clicked and active.

At that time I wasn`t able to unpin it. Maybe you are more lucky.

Uwe

[fotoroeder · Accepted solution]

It has, of course, something to do with your elements, which do not react as expected.

But I guess, any pinning on the page makes it difficult for Muse to decide, wether to push something down or not.

I even tried, if something above the accordion could get pinned without effecting the pushdown.

So my experience so far: No pinning at all on this page, even if the top layer on the master page is pinned it does conflict with the accordion pushing down content.

So far for the weekend.

Uwe

[briancovalt]

Hey Uwe,

Thanks for those insights, they were helpful in me figuring out what was going on.

Elements were only pinned to the center horizontally, but I found that the height of a rectangle in the background made all the difference.

It is there to mask an image above with a parallax effect, and if the rectangle was stretched down to the bottom of the page, it'd effect what other items were pushed down.  If I pulled the height of the rectangle above the accordion, then the elements below the accordion would get pushed down as expected.

The only downside of this is that it seems inconsistent now if the parallax image will be masked while you scroll down on the page because the rectangle mask doesn't fill the whole page.  But I think I can live with that since it seems to work okay when you start at the top of the page, and I think most viewers won't be resizing their browser window after they've landed on this particular page, so it shouldn't be an issue.

Thanks again.

[fotoroeder]

Some users do in fact resize but as you say, it doesn´t really matter . Couldn´t it get to work that you stretch the rectangle to browser width? Then you would not have to pin it?

Otherwise I could only suggest to show a simple, reduced to your issue, .muse?

Uwe