Flexbox adding extra space before first child

Community resources Bugs
1

It was working fine. Then, I added a field and the first field on the form (which was not touched or changed) developed this extra space to the left of it. Deleting the new field and putting everything back exactly as it was before and it’s still broken.

You can see it working correctly on the live site at - http://www.hbot.md

Broken at - http://hyperbaric-centers-of-chicago.webflow.io/contact

Read only - https://preview.webflow.com/preview/hyperbaric-centers-of-chicago?preview=6472f3e9c4872f73a166d65466dbb8bc

2

Bumping for help as this is kind of urgent.

3

I dont think it was good idea to work with flexbox for form input. I dont know why - but for now use this code (or change to cols):

#email-form .w-clearfix:before, #email-form .w-clearfix:after {
    content: initial;
    display: table;
}

Your problem is you nested endlees display:flex elements (parent/child/child) - this is the way to create bugs and wierd results (nested grid is for complex layout)
Example for time you need nested grid ("display:flex: inside “display:flex”). This is not your case:

You dont need flexbox grid for FORM 99% of the times. Use build in flexbox columns (read “Quick layout with Columns”)
https://university.webflow.com/article/form-styling

4

That isn’t what’s going on. I removed flex from everything above the form and it’s still got empty space in front of that first field.

It WAS working just fine. It is NOW broken. There’s something wrong and I shouldn’t have to rebuild it from scratch to correct this kind of issue.

5

This is definitely a bug. I rolled the site back to a version that was working correctly and now, if you change ANYTHING inside of the flexbox, even without touching the first field at all, it inserts extra space in front of the First Name field.

I tried just copy/pasting the email field so I can change it to a phone number field… boom, extra space in front of the First Name field. Adding a field anywhere in the form results in extra space in front of the First Name field.

Adding a class to the First Name field causes the extra space to come in, even before anything else is changed at all. The worst part is, even if I undo whatever change was just done that resulted in the extra space, the extra space remains and I have to roll back the entire project to get it to go away.

This is extremely annoying.

6

Thanks for posting this, this definitely sounds like odd behavior.

I’m investigating this issue for you now.

Thanks in advance for your patience with this and I’ll respond as soon as I have more information.

1 Like
7

Thanks again for posting @Cricitem

I took a look at the form and found the issue. I resolved it by adding 2% right margin on the form field with the combo class half. However I refreshed the preview link to take some screenshots of this fix, and it looks like the issue has been resolved:

19 AM
19 AM1699×694 45.4 KB

Were you able to find a solution to this?

​Thanks in advance, and I’m standing by for your reply.

8

I had to roll it back to a version before any changes were made, that’s why it looks like that for you.

I can add a 2% right margin, but that isn’t a fix, it’s a hack. If you remove that right margin, only that single field gets extra space to the left, and it does it when you do something like adding an unstyled class, or adding a field elsewhere in the form, and it doesn’t go back even when you undo the single change that did it.

9

Thanks for providing that extra information.

I attempted to reproduce this issue with the steps you provided but was unable to do so. Can you please share the exact steps you took to reproduce this error?

I agree that the 2% margin is a workaround rather than a solution. If you can share a screen recording as well of the steps you took, that would be very helpful in identifying the root cause of this issue.

​Thanks in advance, and I’m standing by.

10

flexbox-glitch
flexbox-glitch1688×952 215 KB

11

Thanks for posting this @Cricitem.

Definitely odd behavior. I was able to fix this by deleted the form, adding a new form block and assigning the same class names.

Can you please take these steps to see if it resolves the issue on your end as well?

Thanks in advance!

12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.