Perspective: floating action button

Ignition
21

Finally figured this out. There were a few things I had to fix to get what I wanted.

The order of the objects within the flex container matters. I originally had a column container with a flex repeater first and the button second. The repeater wouldn't extend all the way to the bottom of the container because the button was in the way. So the button didn't actually "float" over the repeater. When I re-arranged them so the button was first, the CSS still forced it to the bottom, so this fixed the floating problem. This leaves a gap at the top where the button would be without the CSS, but I can live with that.

If you wanted the button to stick to the top of the screen, you would need to put the button at the bottom and repeater on top so the button floats over the repeater.

I also found that the calc() isn't really necessary in the CSS. When you use 100vw and 100vh, these are referring to the entire viewport, not just the view that contains the button. So the button is trying to get to the corner of your screen, but the view is stopping it. This means the button is tightly stuck against the corner of the view no matter what you put in the offset. If your view was the entire screen, this would have looked normal, but I wanted this to work in a small view within the page.

So to get the button to be offset from the corner, just use margins.

I'm guessing @victordcq was using a view that took up the entire viewport, so it seemed to work fine. While I was using a smaller view and was confused why the same solution didn't work.

Here is the CSS with my changes:

.psc-floating-button {
	position: sticky;
	top: 100vh;
	left: 100vw;
	width: 40px;
	z-index: 1;
	margin: 20px;
}

Here is the result (ignore the ugly background):
button

1 Like
22

huh weird, maybe something like this is better than so you dont have the border on top?

  • coordinate
    • button
    • flex
      • repeater

the coordinate has to be in fixed, but you can just use width/height: 100% for the flex container so it will act the same as usual

23

I was gonna say, embed the whole flex container/repeater in a coordinate container, and place the button there wherever you want.
That seems like a much simpler solution.

24

ah yeah if you arent really looking to stick it to the side with vh, you can even skip the whole sticky bit

25

This is probably the best solution. I think I was overthinking the problem and honestly I sometimes forget about coordinate containers because I never use them.

26

This is good information you have provided. Thanks. Was wondering how you would put two components on the screen that are "sticky" where they are both at the top of the view with one in the left corner and the other in the right corner.

Experimenting with the CSS you have provided (and I am not an expert here.), it seems that you can't have two components in the same row on the screen.

Example:
Component 1: ; position: sticky !important; top: 0px !important; left: 5px !important;
Component 2: ; position: sticky !important; top: 0px !important; left: 150px !important;

If I do this, one of the components gets staggered or misaligned and does not line up correctly. (Note: I played with the Z-order, but this didn't seem to fix the issue). Do you have any words of wisdom? Many thanks in advance.

27

i dont have problems with this.
the moment they are posiiton sticky, all other position rules dissapear, so there should be no reason for it to misalign, unless they are not the same size or something