Form builder floating form button icon is too low

Ask the Community General Questions
1

With the update to the form builder, the envelope icon (in this case) is too low and small. Can you please tweak back to how it was?

image

1 Like
2

Hi Hugh! My apologies for the long wait :pray:t2:

I’ve checked your widgets, but I’m afraid I didn’t find this particular widget you’ve shown. All the Form Builder widgets from your account look and work fine for me:

image

If it’s still an issue for you, could you please send me a direct link to the widget in question? I’ll be very happy to help!

1 Like
4

I can’t share the website because it is not live yet. But the envelope is definitely dropping lower on my button. Also the button is set to a shade of dark blue but since the reconfiguration of the form builder interface, the button is black.

image
image700Ă—469 19.7 KB

This is in the newest version of firefox:

image

In chrome it is the right color but the envelope icon is still “low”.

image

If you want to look in my control panel, it is the form that starts with “865”

1 Like
5

Hi Hugh, thanks a lot for all the info provided!

Our developers have just applied a fix that should resolve this issue, could you please check your widgets and let me know if they work and display correctly now?

6

The color is correct now, but the envelop is still too low compared to the letters.

image

8

Hi Hugh, my apologies for such a delay!

I’m really sorry that not everything is back to normal, I’ve asked our developers to have another go, and I’ll get back to you with news in this thread.

We’re doing our best to provide a solution as fast as possible :pray:t2:

1 Like
9

Thanks a lot for your patience, @Hugh!

I’ve replicated the issue you described on this website: https://www.michiganblueberry.us/ (if you need me to delete it, just let me know), and the reason for this is a conflict in styles.

To get it fixed, we’ve added the following CSS code to the widget settings:

.global-styles, [class*="Icon__IconContainer"] svg {
  vertical-align: unset;
}

It might happen that the issue on your unpublished website is caused by the same conflict, and the CSS code above should help.

Could you please check your widgets and let me know if this solution worked?

10

It did work. As suggested previously I added comments so I can know what the code in the Custom CSS field is there for.

/* Moves envelope icon to center vertically */
.global-styles, [class*="Icon__IconContainer"] svg {
  vertical-align: unset;
}
/* Moves envelope icon to center vertically */

I went ahead and manually added it by hand to the custom css field in all 32 of our forms.

1 Like
11

Oh, my apologies for sending the code without the comments, we’ll try to put this into our practice :pray:t2:

I’m really sorry that you had to go through this and add the code to all your widgets, but I’m really happy that this solution worked.

I hope no other issues will get in your way, and we in our turn will do our best to keep your widgets safe and sound :raised_hands:t2:

1 Like
12

I am grateful that the team at Elfsight is so responsive to these little issues that come up. Thank you.

1 Like
13

Thank YOU for your patience and for sticking with us! :heart_eyes: