When I expand the browser window (Chrome, Safari), regardless of what layout restrictions I use across nested elements/containers (fixed pixel, fit, etc), I can’t get the layout of the form to maintain consistency. This creates these issues:
Bigest Issue: the table I created using containers doesn’t preserve the “rows” so the table looks messed up.The first time I created the table, I grouped containers into “rows,” however, because of the way I’m using “hide/show,” I had to rebuilt the table grouping the containers by columns for it to work
Lines of text start having too much space between them, doesn’t look good - see text next to the Email checkbox for example, or the spacing between the red font text
For some buttons the text is no-longer centered, for buttons with 2 lines of text, the button expands though it doesn’t need to
What I tried:
Literally every possible layout setting for each element and nested element/container
I also tried to force everything to fit a maximum height container in Feathery, based on the size of the container when everything looks right. Instead of maintaining that proportionality, it expands the content when the browser is widened and then cuts off the bottom of the form instead of making the form fit into the fixed maximum height (that it fits into just fine when the browser window is smaller)
I tried to do the same on the Webflow side, same thing, the bottom of the form is cut off instead of the form fitting into the maximum height allowed
I just cannot figure out what the layout settings should be so that even if the browser window is stretched, it keeps the size of the form constant at the size when everything is laid out correctly.
Here are images of when everything looks right, and what happens when I widen the browser:
Everything looks good:
Hi There, I still haven’t been able to resolve this issue.
I can’t switch (back) to horizontal “rows” or containers because there are 2 repeatable dropdown menus in different rows that need to be in a repeatable containers, but there can only be one repeatable container per step/page, therefore I need to have a container that is a “column” containing two repeatable drop down menus that need to be in separate rows in one container.
The simplest fix would be to understand how to set the max size of everything in a given container (in my case the container that has everything in that step inside of it). Putting fixed px sizes for the container of all the elements in the step doesn’t work, the step/page continues to spread out as you stretch the browser. Putting it in a fixed sized container on the webflow side doesn’t work because as you stretch the page the form content just starts to get cut off even if the setting is to “contain” (fit) the space.
I don’t see these issues in the feathery-hosted version of your form, which leads me to believe it may be from a stray css rule of the site that you’ve embedded your form into.
if your question is specifically about how to set the max size of the Feathery form step itself, you can select the overall step and set its width to something other than fill, like a fixed pixel size
Fixed! I think. I tried a fixed pixel max width applied to the embed code in webflow but that didn’t work. What ended up working, in case someone else is embedding forms, is fixing the size of the font in pixels on the webflow side. Despite that the font type and size is set in Feathery, somehow the webflow setting acts on the line spacing if you have it set to something that is a relative size (in my case “em”). I had the font set to 1.4 em (so font size derived from the parent font size), for whatever reason this caused the line spacing in the Feathery form to spread as I stretched the browser page.
