Driving Distance Widget: Width of the widget keeps expanding to the right with multiple successive clicks

Secondly, I injected CSS to prevent the DD calculator field sizes from expanding, but the red CHANGE button keeps expanding to the right with multiple successive clicks (10-20 clicks) until it goes off the page. Can I stop this form happening?

I assume that you are referring to this issue.

It seems that width of the field is resizing when button is clicked. I have tried to prevent it with CSS, but I was not able to do it. 

I will escalate this issue to our developers and we will inform you via this thread once this issue is resolved. 

For now I can only suggest you to set fix width of the widget table. Field will not be expanded, but eventually after multiple clicks table will be moved to new row. 

You can add this CSS code to your widget:

table {

    width: 300px!important;

}

Here is my demo form: https://form.jotform.com/70364445653963

This seems to help, somewhat. Thank you!

I do have another issue now. I applied the above solution to the live form of the actual website, and the red CHANGE Button is almost completely hidden when viewed on my iPhone. This is on Page 2 of the website https://clevelandblackcar.com/order.html. The form can be found at https://www.jotform.com/build/63205773499163.

 

The unrelated question to this ticket will be answered here:

https://www.jotform.com/answers/1058423

 

Hi, thank you for reporting the issue. It should be okay now. Please try it again and let us know if the problem persist.

Regards,
Widget Team

This is much worse now. The widget disappears when I do a calculation once. I need to be able to perform multiple calculations in one session without refreshing the page.

 

Also, the unit conversion (miles or km) can no longer be hidden, although I have selected in properties to have it hidden. I was able to use it the way it was before, now I have to disable the page on my website.

@JBL I'm sorry to hear that, I bet that your browser was using the cached version of the widget. In order to get the latest update try to clean the browser cache or just press SHIFT+F5 to do a full refresh. That way you will be able to get our updates.

Let us know if that does't work for you so we can further check.

Regards,
Widget Team

Okay. Looks like it is working fine now. I had to do both a refresh and then cleared my cache.

I am still having problems with this driving distance widget shifting my whole form to the right whenever I use it to perform a calculation on an iPhone. The website is https://clevelandblackcar.com and the form can be found under the "Reserve" tab. I have renamed the widget to "Calculate Fare".

You will need to enter a long address to replicate the problem. I suggest entering "Cleveland Hopkins International Airport", since most of my clients will be entering this location.

When the whole form shifts to the right it hides the Square Credit Card Payment fields and the Submit button, so my clients cannot complete the transaction.

 

The form is https://www.jotform.com/build/70596095360158

 

 

Thanks

Are you referring to the form #70537439914160 on the https://clevelandblackcar.com/order.html page?

Could you please share a screenshot of the issue with us?

This is not available on desktop, only mobile. If you go to https://clevelandblackcar.com on mobile, you should get the mobile version of the site, then click on "Reserve".

The second and third screen shots show the form shifted to the right after I perform a calculation.

 

I have removed custom CSS (http://pastebin.com/raw/PLQyB4A3) from your widget field.

Please re-check the page.

I am still experiencing the problem. The css was still in the widget so I deleted it and tried it, and then I put it back again. It makes no difference to the form shifting to the right. I cleared my cache and also tried in private browsing mode.

The mobile website can also be accessed at m.clevelandblackcar.com, but even though you can access it on a desktop, you can only experience the problem on a phone.

I have tested your embedded form https://clevelandblackcar.com/order.html on iPhone emulator and I was not able to replicate mentioned issue. I have also tested same form on my Samsung Galaxy S4 and credit card fields were not cut off like on screenshot you provided. 

Please try to re-embed your form with iFrame code to see if that will resolve your issue.

Getting the form iFrame code

Also can you test your standalone form as well and see if you are able to replicate same issue. 

Again, the issue I am having is NOT with the form you tested. The two forms are similar, but not the same. The form I am having trouble with is at m.clevelandblackcar.com, and can be found under the tab "Reserve".

I tested your website and "Reserve" section on my phone (Android) and the form was showing properly, it wasn't shifted:

  

And here are the tests from iPhone 7 simulator:

  

Did you try to test from some other phone?

Also, which iPhone did you use to test this form?

We'll wait for your response.

Thank you!

If you have short entries like "Miami FL" and "Jacksonville FL" it will not shift. I suggested in one of my earlier posts above to use "Cleveland Hopkins International Airport", since most of my clients will be entering that location. The longer the address entered, the more it shifts.

I am using an iPhone 6+

I have checked your form over its direct link, and I can replicate the issue - it seems that the CSS styles within the form allow the widget to expand too far.

Please try adding the following custom CSS to your form, and let us know whether it fixes the issue you were encountering:

@media only screen and (max-width: 640px) {
  .custom-field-frame, .direct-embed-widgets, .signature-pad-wrapper {
    width: 600px !important;
  }
}
@media only screen and (max-width: 480px) {
  .custom-field-frame, .direct-embed-widgets, .signature-pad-wrapper {
    width: 300px !important;
  }
}

Looking forward to hearing how it goes.

Thank you. This solves much of the problem. However, it looks good when the phone is held vertically. When you turn it horizontally much off the bottom portion is cut off, including the entire credit card payment section. I don't know if this is a related problem, or if it is an issue with padding.

I have added the next CSS to your form to reduce spacing in landscape mode.

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
.form-sub-label-container {
width: inherit !important;
}
.form-line {
padding-top: 0;
padding-bottom: 0
}
}

Thank you.

It looks much better now. Thank you very much!!!