Floating group not above elements?

Need help Responsiveness
1

I have a page which is column layout with a group containing text
At the bottom, I have a floating group that contains an image.
Upon clicking on the image in floating group at bottom right, it displays the ‘floating group B’.

The problem is that since this is a floating group, it will cover the text above when the window is made smaller.

How can I have a group at bottom which does not cover the text when windows is resized.

I cannot have multiple empty groups stacked as columns since the text may vary and the group needs to be stacked at bottom of screen

Any help is very much appreciated!

image
image999×741 128 KB

2

You could use some custom code for CSS to force a regular group to be at the bottom of the screen.

3

If I understand the issue correctly, simply adding a “healthy” bottom margin - i.e. one having a height that exceeds the maximum height of the appearing FG - to your body text (or its container) would enable the user to scroll down far enough see the text in its entirety. You could even make the bottom margin different heights at different page widths via conditionals.

Don’t know if that helps, as I’m not sure I fully understand the behavior trying to achieve. Good luck though! :slightly_smiling_face:

4

I managed to get it working, though not to the full desired design.

  1. I created a reusable element
  2. put an image at bottom right
  3. put a floating group in it
  4. add the workflow so when i click on the image, it displays the floating group
  5. place the reusable element into a floating group in page that I want to see it

image
clicking on the image

results into the floating group:

image
image411×501 8.79 KB

I’m still not able to resize the floating group dynamically with the mouse during run-time.