Hidden ajax-loader shifts Submit button

  • Problem.
    The Submit button is not centred horizontally. See screenshot:
    https://www.dropbox.com/s/yrrqqeh3jgp58wk/Submit_button_not_centred.png?dl=0

    Troubleshooting.
    One of the recent updates added a new feature: ajax-loader indicator (a small circle rotating inside a bigger circle) added next to the Submit button. This indicator is shown briefly after the Submit button is pressed, and normally it is hidden using “visibility: hidden;” CSS style, but this CSS style doesn’t hide the margins so the indicator occupies the space, in the hidden state too, and so pushes the Submit button to the left.

    Suggested solution.
    In file contact-form-7/includes/css/styles.css
    replace:

    .wpcf7 .ajax-loader {
	visibility: hidden;
	display: inline-block;

    with

    .wpcf7 .ajax-loader {
	visibility: hidden;
	display: none;

    and

    .wpcf7 form.submitting .ajax-loader {
	visibility: visible;

    with

    .wpcf7 form.submitting .ajax-loader {
	visibility: visible;
	display: inline-block;
Viewing 4 replies - 1 through 4 (of 4 total)

  • hi @drewbul

    to fix your issue use .wpcf7 .ajax-loader {position:absolute}

    Your solution would move the objects when the loader appears, not sure if that would be so cool!

    Thread Starter drewbul

    (@drewbul)

    Indeed, this is a better solution. Thank you! This way I don’t have to change the plugin’s source code. But I still have to use the “!important” directive in my CSS, in order to override the CSS from the plugin, which is not a very good solution, so the plugin code should be updated after all.
    Here’s my CSS:

    .wpcf7{
  .ajax-loader{
    position:absolute !important;
  }
}
    Thread Starter drewbul

    (@drewbul)

    Actually, the “!important” directive is not necessary:

    .wpcf7{
  span.ajax-loader{
    position:absolute;
  }
}

    But, all the same, it would be nice to have it in the plugin from the box.

    This is still valid. I have the same problem.
    Any chance this is gonna be fixed in the next update, soon?
    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hidden ajax-loader shifts Submit button’ is closed to new replies.