This is my first post on the community, and I already need your help on a site I’m working on.
I built an onboarding form using the “Inputflow” app - it’s amazing!!
However there is a “back”-button that I need to be fixed in a position, but it jumps around with every next step of the onboarding form.
I am quite new to Webflow. I would say I tried “everything in my power”, but that’s probably not too much
If anyone can help me on this, that would mean a lot!
Unfortunately, I cannot share the read-only page, because my client disagreed with that, but here is a video representation and a screenshot of the style panel.
If someone can help, but only with the read-only page, I will try to convince my client again!
Hello @simonjohannssen, it is really hard to find a solution for your issue without a read-only link, however if I had to guess I think your problem is the position of your back-button, because it is absolute it is placed on top of content depending on the size of the parent element, so either change its position or compensate, with padding, the parent element to always have room for that button. I hope this helps!
It sounds like you’re encountering an issue with the “back” button position in Webflow. To fix the button’s position, try setting it to a fixed position within the style panel. Here are a few steps you can follow:
Select the “back” button.
In the Style panel, set its Position to “Fixed.”
Adjust the position using the Top, Bottom, Left, and Right properties to pin it to your desired spot on the screen.
Ensure the button has a Z-index that is higher than other elements so it stays on top.
If you’re still facing issues, ensure other interactions or animations aren’t affecting the button’s position. You might want to use custom code if the problem persists or affects responsiveness.
However in your running page, that button position is adjusted somewhere- I’m assuming by code, by the Inputflow scripts, and configured in the app itself.
Here for example, the button’s absolute top position is something like 16 rem which pushes it down to roughly overlay the button on that specific form step.
I’m making some guesses here but I don’t think that’s how it’s meant to work.
I’d assume Inputflow gives you some per-step button positioning, but it’s probably meant to be top-left corner next to the title. Since each step has different content, the position of the button is different on every step and every breakpoint, and it would be very difficult to lay that arrow on top of the button precisely.
I’d stick with their design and keep the button simple, top-left. Then all you need is to ensure that the heading has a left margin or padding sufficient for the button.
In any case, Inputflow is dynamically creating and positioning elements, so I’d stick to their style guide to keep things working smoothly.
Thank you very much!
Unfortunately I still didn’t get it to stick to a position (this is Inputflow’s original styling, haven’t changed anything !), but I will try again!
I appreciate the help <3
It’s definitely sticking to a position, but the position is from the top-left corner of the whole step container, not the top-left corner of the button.
I’d check their docs and their support if you’re unsure but otherwise I’d try to put that back button top-left so your wrapping text doesn’t keep moving things as the browser resizes.
