Please help with formatting issues.

My form doesn't have the right behavior when switching to landscape and specifically has the following problems:

In Landscape:

1. 'Tracking Number(s)' field gets cut off on the right side

2. 'Time' field drops the minute selector down to the next line. We actually want the time field to move up to be aligned directly to the right of 'Tracking Number(s).

3. Under 'Courier Information' Collapse - 'Fedex Station' field shrinks

In both portrait and landscape, the 'Signature' field does not display correctly. In portrait mode the horizontal line is not centered within the signature box. In landscape mode we want the signature box to expand to take up most of the display but leave enough margin to be able to scroll using your finger. 

Thanks for your assistance. If you notice other ways to improve the mobile user experience with this form please offer your suggestions. 

Also,

We will be glad to help you with your concern, however, we may need some time to find the perfect solution for your issues. I will be working on it and I will update you here in this thread, as soon as possible, if I already have it.

May I just know if there are any specific device where you're testing your form in landscape and portrait, please?

Thank you.

I am primarily using an iPhone 6 but this will be used on many different smart phones and even some iPads. 

Hello iStore,

It seems my colleague @Mike_G is working on a solution for you. He will get back to you as soon as he is ready with the solution. I have also sent a message to him.

Thank you!

I'm sorry for the delayed response and if it took me some time to find a resolution for your issues.

Below are the codes that should fix the issues you stated in your post.

@media (min-width : 304px) and (max-width: 664px){

     .signature-line.signature-wrapper, .pad, .jSignature, #signature_pad_10{

          width: 100% !important;

     }

}

@media (min-width : 665px) and (max-width: 717px){

     .signature-line.signature-wrapper, .pad, .jSignature, #signature_pad_10{

          width: 100% !important;

}     

#cid_44{

          width: 50% !important;

     }

     #cid_44 select{

          width: 100% !important;

     }

     #id_48{

          width: 60% !important;

          display: inline-block !important;

float:left !important;

clear:both !important;

     }

     #cid_48 iframe{

          width: 100% !important;

     }

     #id_49{

          width:40% !important;

          display: inline-block !important;

          position:absolute !important; 

         float:right !important;

clear:both !important;

     }

     #cid_49 .form-sub-label-container{

          width: 30% !important;

     }

}

The Custom CSS codes above needs to be injected in the form.

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

However, the one below needs to be added in the custom CSS tab of the Dynamic Textbox widget in your form.

@media (min-width : 550px) and (max-width: 717px){

     input[id^="var"] {

         width: 85% !important;

     }

     p[id^="p"] {

         width:100% !important;

     }

     .removeVar{

         width: 25px !important;

     }

}

With regards to your other concern about resetting some of your submissions for this week that you have used for testing, I have moved it to a new thread to avoid confusion with the replies being given.

Please click this link to go to the new thread.

I hope the codes above helps. If you have other questions or concerns, please feel free to contact us anytime.

Thank you.

While I appreciate your effort, your suggested CSS created more problems than it fixed. 

- Field heights were lost (shorter) 

- Time field wasn't fixed

- Signature capture became unusable

and other problems.

I'm checking this now. I'll let you know later. 

Please check this form to your end and let me know if you need more adjustments: https://www.jotform.com/63501520001939. I cannot enumerate the changes so if the layout is now acceptable for you, you can just clone the form and use it.

That is much better. A couple more adjustments if you don't mind. 

1.

2. Extend the width of the 'Tracking #' field(s) to show 14 characters

Because I have been with jotform since before you began limiting the number of forms, I am unable to clone forms. Is there something you can change with my account to allow this or can you include the complete CSS and I will replace all the CSS in mine.

Thanks!

I cannot replicate the problem with the eSignature field. Is it when you start to sign it when a pen or your fingertip? What your device name and model/version? 

I've fixed the tracking field. 

Please check again and let me know if all good. I'll move the form to your account after.

Hi Welvin - I have been testing with just my fingertip on iPhone 6 iOS 10.0.2. The drawn image doesn't follow the fingertip if rotated to other view after loading the page. 

Hello iStore,

To avoid any confusion regarding your latest response, I have moved the issue regarding the signature widget in landscape mode to a new thread. Please follow this link to view this thread: https://www.jotform.com/answers/1015630 

Thank you.

Yes Welvin, please go ahead and move it to my account. Thanks.

I have moved the form https://www.jotform.com/63501520001939 that Welvin created to your account iStore.

Let us know if you need further assistance.