Sliding panel problems with conditionally rendered components

  • 1
  • Problem
  • Updated 1 year ago
Love the sliding panels, however:
In a sliding panel, if there are conditionally rendered components that are hidden, upon rendering of those components, if the page length increases, the sliding pane does not expand its length or add a scroll bar so you can't see the content. I worked around this to a degree by adding a wrapper component in the panel set to 95% VH. This gives me a scroll bar if the page length increases below the visible screen. However, the panel behaves very strangely on mobile vs. a pop up when showing and hiding components. Also, I have a background image in the wrapper that doesn't render well. Instead of stretching it duplicates with gaps or only renders half the page... just an overall glitchy experience on iPhone 7 plus with latest IOS from a layout perspective. I am on 10.1.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Also, I have a page that has several components that have conditional rendering:
1) if I open the page directly the components render and hide very quickly (about 1 second)
2) if I display them as a page include in. Popup, it is also fast (about 1 second)
3) if I display the page as a page include in a sliding panel, it takes 10 seconds to load the same components.
I think this (and the background being wonky) that this may be the primary problem of the glitchy experience particularly on mobile.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
This problem may be more due to "scale to mobile" than the sliding panel. Seems to maybe be exasperated by sliding panel.