Streaming live at 10am (PST)

Fixed position item not fixed and not breaking out of the page flow

#1

I’m working with a page that has a bit of a complicated modal situation happening in one section. Ideally, the following should happen:

  • users would hover over a callout which is placed over a photo
  • on hover a item preview should appear (pulling from a collection list) with a “view item” button within the hover window.
  • upon clicking the “view item” button, a modal window (fixed position) would appear, taking over the entire viewport

My issue right now is that the fixed modal window isn’t behaving as fixed. it begins at the edge of its parent element instead of breaking page flow, and scrolls with the page.

Read Only Link (sorry in advance that this is so poorly organized):
https://preview.webflow.com/preview/aso-wireframe1?utm_source=aso-wireframe1&preview=dcbee37352aaeb76f15c9869606b1e0b

Here’s where the problem is:

Any help is very greatly appreciated!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

0 Likes

#2

Position:fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform , perspective , or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top , right , bottom , and left .

Does this apply?

except when one of its ancestors has a transform , perspective , or filter property set to something other than none

If not, it might be easier to diagnose if you could copy just the elements needed to replicate the problem to a new page, and reference that.

0 Likes

#3

I just checked all of the parent elements, and it seems like it doesn’t apply. No trace of transform, perspective, or filter properties assigned anywhere. I also checked in a few different browsers and found that the issue persists.

Here is a link to the section within its own project
https://preview.webflow.com/preview/fixed-position-issue?utm_source=fixed-position-issue&preview=6474a73fa54b183a45d0ddef6aaae058

0 Likes

#4

Can you publish that so it can be inspected apart from the designer?

0 Likes

#5

Yes! Here you go https://fixed-position-issue.webflow.io/

0 Likes

#6

Except for when the element is displayed by the interaction.

CloudApp

0 Likes

#7

Ah! I didn’t even consider that. That solved it! Thank you so much!!

0 Likes

#8

@webdev I have one more quick question! I’m having similar issues as above with a modal that is fixed, but not breaking out of the slider box that it is nested within. I’ve looked at the code and it looks like removing this transform from the slide solves the issue. Still, I’m not sure how to do that within Webflow. I’m assuming the line is showing up because of the slide transition (I could be wrong) - is there any way to set slider animation to none?

0 Likes

#9

You are right, and I don’t believe there is a way to do that.

You should be able to move the modal out and use a trigger in the slide to display it. I would need to see the specific page to be more helpful.

0 Likes

#10

That makes sense! The only issue with moving the modal out is that it needs to live within a collection item (located within the slider) to adopt the item’s properties. I think I can accomplish what I need to do with tabs instead of a slider! I’ll try that for now!

Thank you for all your help!

0 Likes

#11

Just an FYI, you can have content that is hidden in the slide (from the cms), loaded into another element outside a collection list; via javascript. One line of code with JQuery.

0 Likes