Skip Navigation

[Resolved] Submit form with AJAX – spinner causes my submit button to move

This support ticket is created 4 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9:00 – 13:00
14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 - - 14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

This topic contains 11 replies, has 2 voices.

Last updated by lindsayH 4 years, 6 months ago.

Assisted by: Jamal.

Author
Posts
#1633665
Submit Button on Press.png
Submit Button Before.png

I've tried the CSS below, which stops the Submit button moving on my front end form, but shoots the spinner off to the far right (of course).

It doesn't stay on screen long enough for me to use Inspect Element. I added the red to just show what's happening a little clearer. Could you let me know how I could change the CSS to stop my button moving.

.loading-spinner {
	background-color: red !important;
	text-align: right !important; padding-top:10px !important;
}
#1633763

Hello and thank you for contacting the Toolset support.

To better assist you with this issue, I'll need to take a look at your form. I wonder where is this form used?
Would it be possible to allow me temporary access to your admin area for a closer look? If yes, Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

#1633793

I'm working locally at the moment, but it's just a short Posts Form (not in expert mode). So it should happen to you too?

I've added a few forms and it happens to them all.

#1634213

I've found a way for you to have temporary access using hosts temporary URL.

Can you set the next reply as private and I'll send you credentials.

Many thanks, Lins

#1634397

Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

#1634429

Hi this reply isn't private? Could you set as so. Many thanks.

#1634457

Could you check now?

#1634503

Thank you for the credentials. I was able to check the styles for the spinner by configuring my browser to simulate a slow connection with high latency. This let me take a screenshot from the developer tools, check this screenshot hidden link

It seems that the background is applied by the theme styles, you will need to write a custom CSS code on the form or the page to override the theme styles.

Check this screenshot to define a network profile on chrome hidden link
Then use the profile from the network tab. Check this hidden link

I hope this helps. Let me know if you have any questions.

#1634549

Yes, I put the background on, see my opening post, the CSS there and the two images to show you how it pushes the submit button down.

So the background isn't the issue.

The issue is that it moves my submit button. I just want to know the CSS to apply to stop this happening. I tried float right, but there isn't a containing div.

I'll look at your links, but this will be happening to everyone using a standard form... so should be fixed at source.

Many thanks, Lins

#1634581

The CSS that stops it moving the submit button:

.loading-spinner {
position: absolute;
margin-left: 5px;
}

So don't know if you want to pass that on to someone. Thanks for the throttling tip, helped me with finding the above.

#1634673

Thank you for your feedback. Indeed, your CSS code might help someone else. Thanks.

If you consider this issue resolved, I'll kindly ask you to mark this ticket as resolved as well.

Stay safe and nice weekend.

#1634785

My issue is resolved now. Thank you!