Width of iFrame widget causing text wrapping

  • Profile Image
    TBSE
    Asked on May 19, 2017 at 10:11 AM

    Hello,

    Take a look at my website - www.tbsportsentertainment.com.

     

    Click one of the buttons within the TICKET ORDER FORM, where the radio buttons / STRIPE payment appears.

     

    You will notice that the parenthesis bar appears on the top of the bar instead instead of the USD wording.

    My developer said this was a JotForm issue.

     

    Can this be fixed?

  • Profile Image
    david
    Answered on May 19, 2017 at 12:06 PM

    The width of your iframe widgets is set quite low so the text is wrapping:

    Adjust the width of the widgets until the the text is no longer wrapping. 

     

  • Profile Image
    TBSE
    Answered on May 19, 2017 at 12:24 PM

    Hello,

    If pose, can you forward suggestions for the dimensions? I will then forward to my developer.

    Thanks for your help.

     

    George

  • Profile Image
    david
    Answered on May 19, 2017 at 01:32 PM

    From my testing, about 500px looked pretty good.  Also, adding the following CSS directly to the widgets allow for the full form to show rather than scrolling in the frame:

    iframe
    {
    min-height : 900px;
    min-width : 500px;
    }

    Here is how the form would look with the changes made:

    https://form.jotformpro.com/71384863452967

    You can clone it to your own account if you would like a copy:

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image
    TBSE
    Answered on May 19, 2017 at 02:27 PM

    Thanks for the information. Will forward the information today. Thanks.

  • Profile Image
    david
    Answered on May 19, 2017 at 02:40 PM

    Very welcome.  If you or they have any further questions, let us know and we will be happy to help.

  • Profile Image
    TBSE
    Answered on June 04, 2017 at 03:51 PM

    Hello,

    When I look at my website on a small screen smartphone, the submit button does not appear, just orange color at the bottom (Homepage JotForms - www.tbsportsentertainment.com).

    Also, some of the text within the JotForms when I click on a payment button comes off of a screen.

    What do I tell my developer to do to make the necessary changes?

    Thanks,

    George

  • Profile Image
    Mike
    Answered on June 04, 2017 at 06:10 PM

    You may also try adding the next CSS to your existing CSS on the widgets. It should set the width to the 100% of available space.

    @media only screen and (max-width: 40em) {
    iframe {
    min-width: initial;
    min-height: initial;
    }
    }

  • Profile Image
    TBSE
    Answered on June 04, 2017 at 06:14 PM

    Hello,

    With what you just listed, will that allow the SUBMIT button to be listed as well?

     

    THanks,

    George

  • Profile Image
    Mike_G
    Answered on June 04, 2017 at 07:33 PM

    The CSS codes my colleague, Mike, provided above is specifically for devices with small screens.

    I would suggest you try it on your end and let us know if you will still encounter any issues after doing so.

    We would also appreciate if you could share with us in this thread a screenshot of what you are seeing on your end.

    How-to-Post-Screenshots-to-Our-Support-Forum

    Thank you.

  • Profile Image
    ashwin_d
    Answered on June 04, 2017 at 11:14 PM

    Hello George,

    We have received an empty response from you. If you have replied form your email, please click on the following URL to reply again:  https://www.jotform.com/answers/1149164

    Thank you!

  • Profile Image
    TBSE
    Answered on June 04, 2017 at 11:18 PM

    Sorry,

    Its difficult to do a screen shot from my mobile phone. However, if you view my homepage on a mobile device, small screen, and click one of the payment buttons, look at how the JotForm appears and you will see what I was trying to confer.

    THanks again,

    George

  • Profile Image
    ashwin_d
    Answered on June 04, 2017 at 11:58 PM

    Hello George,

    I did check your webpage where you have embedded your form and did not find any issue with that. Your form appears correctly in mobile devices. Please check the screenshot below:

     

    I would suggest you to please share a screenshot of the issue and we will take a look. The following guide should help you how to upload image in forum post:  http://www.jotform.com/answers/277033

    If you are unable to upload image using your mobile device, I would suggest you to please use your computer to upload file.

    Thank you!

  • Profile Image
    TBSE
    Answered on June 05, 2017 at 07:56 AM

    WOW, will try again. On that screenshot above, did the SUBMIT button at the bottom display at well? Check again on a small screen and let me know what you see.

    THanks,

    George

  • Profile Image
    ashwin_d
    Answered on June 05, 2017 at 09:08 AM

    Hello George,

    I did check your embedded form and it does display the submit button correctly. Please check the screenshot below:

    Do test your embedded form again in mobile devices again and get back to us if you have any trouble.

    Thank you!