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

  • Profile Image
    JBL
    Asked on February 06, 2017 at 12:32 PM
    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?
  • Profile Image
    BJoanna
    Answered on February 06, 2017 at 12:52 PM

    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

  • Profile Image
    JBL
    Answered on February 06, 2017 at 01:46 PM

    This seems to help, somewhat. Thank you!

  • Profile Image
    JBL
    Answered on February 06, 2017 at 07:36 PM

    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.

     

    Not related, but is it possible to narrow the Gratuity and Total fields below for mobile devices?

     

    Thanks

  • Profile Image
    Jeanette
    Answered on February 06, 2017 at 07:40 PM

    The unrelated question to this ticket will be answered here:

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

     

  • Profile Image
    widgets
    Answered on February 23, 2017 at 10:08 AM

    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

  • Profile Image
    JBL
    Answered on February 23, 2017 at 10:51 AM

    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.

  • Profile Image
    widgets
    Answered on February 23, 2017 at 10:58 AM

    @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

  • Profile Image
    JBL
    Answered on February 23, 2017 at 04:40 PM

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

  • Profile Image
    JBL
    Answered on March 02, 2017 at 03:12 PM

    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

  • Profile Image
    Mike
    Answered on March 02, 2017 at 06:16 PM

    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?

  • Profile Image
    JBL
    Answered on March 02, 2017 at 08:02 PM

    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.

     

  • Profile Image
    Mike
    Answered on March 02, 2017 at 09:37 PM

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

    Please re-check the page.

  • Profile Image
    JBL
    Answered on March 02, 2017 at 10:08 PM

    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.

  • Profile Image
    BJoanna
    Answered on March 03, 2017 at 02:45 AM

    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. 

  • Profile Image
    JBL
    Answered on March 03, 2017 at 03:43 AM

    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".

  • Profile Image
    Nik_C
    Answered on March 03, 2017 at 05:48 AM

    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!

  • Profile Image
    JBL
    Answered on March 03, 2017 at 06:04 AM

    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+

  • Profile Image
    Boris
    Answered on March 03, 2017 at 09:30 AM

    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.

  • Profile Image
    JBL
    Answered on March 03, 2017 at 01:41 PM

    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.

  • Profile Image
    Mike
    Answered on March 03, 2017 at 04:43 PM

    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.

  • Profile Image
    JBL
    Answered on March 03, 2017 at 09:50 PM

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