[JoshuaParticipant]

(Using latest WP, X Theme, and Convertplug)

I built a modal to display a Contact Form 7 form. The form has a drop down. Pretty basic stuff.

Everything works fine in Chrome and in Edge and in Safari.

In Firefox, the dropdown isn’t attached to the dropdown. Everything looks normal. But when you click the button to activate the dropdown, the dropdown appears almost completely at the bottom right of the screen.

Anyone see this before? Or have a guess?

I’m digging through the scripts and CSS, but I haven’t found anything yet.

Thanks,

Josh

[NicoModerator]

Hi There,

Thanks for writing in.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[JoshuaParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

It seems you have lot of custom CSS and one of them causing the issue. To narrow down the issue; kindly take off your Custom CSS and see what happen.

Thanks!

[JoshuaParticipant]

Thanks for the help. Did you have the same error on Firefox?

I’ve removed the custom CSS.

But the dropdown is still misplaced and only misplaced on Firefox.

The select field and the options have a static position. I can’t find a single reason for that box to be anywhere other than where it belongs.

Now it is properly positioned vertically. It’s just offset left.

I’ve used Firefox inspector and Firebug and Chrome inspector. I can’t find anything. Perspective- and Transform- origins are in pixels on FF instead of % on Chrome. That shouldn’t do anything – should it?

[JoshuaParticipant]

I just noticed something that may or may not matter.

Now, the dropdown is exactly 50% to the right of where it is supposed to be.

Still no idea why.

[JoshuaParticipant]

https://docs.google.com/spreadsheets/d/10v5l1SD0ECngU3a1MN9ic2lc1XmV7L_3VTtWNFnuUD8/edit?usp=sharing

Using Firebug, I copied the full list of CSS output.
I did it for the 1st option of the drop down in the page and of one of the ones in the modal.

I’ve highlighted the differences.

9 color differences
3 that were different pixels but same %
Perspective-origin
Transform-origin
Width

No differences that matter.

[JoshuaParticipant]

Apparently the CF7 dropdown and the ConvertPlug simply don’t like each other.

Clean install. Nothing added except CF7, the X Theme, and Convertplug. You can see the results.

[RadModerator]

Hi Joshua,

Not sure where to find the page you’re testing, but somehow, all the form I checked works fine. Nothing similar from your screenshots. The dropdown displays as a whole. What browser you’re testing it on?

Thanks!

[JoshuaParticipant]

The error happens in Firefox only. What browser were you using?

[RadModerator]

This reply has been marked as private.

[JoshuaParticipant]

I was using a 47.0.x — I think it was .1 but upgraded to 48. I deactivate every add on. And I still have the problem.

Just so I understand 100%. In that browser, you clicked the drop down and it was properly aligned below the form field, yes?

[JoshuaParticipant]

http://test.rustbeltwebworks.com/

The site is as naked and bare as I can make it. Only installed X, convertplug, cf7.

Created 1 form. Created 1 modal. Error in FireFox only, but on my mac, my windows box, and client’s windows box.

[RadModerator]

Hi there,

Thanks, I see it now. It’s because of CovertPlug’s transform CSS. Basically, the transform changes the position of the element, but the drop down doesn’t follow it.

First, please add this custom CSS

.cp-modal-popup-container select {
padding: 0px;
}

Then this one to fix transform on firefox,

@-moz-document url-prefix() { 
  .cp-modal {
      -moz-transform: translate(0%,0%);
      left: 30%;
   }
}

Hope this helps.

[JoshuaParticipant]

Thanks for the help.

It worked on the test site, but not on the actualy site.

However, it works fine if I make the modal full screen.

Thanks again.

[Author]

Posts