Width of iFrame widget causing text wrapping

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?

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. 

Hello,

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

Thanks for your help.

George

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

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

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

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

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;
}
}

Hello,

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

THanks,

George

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.

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!

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

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!

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

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!