- noragoodAsked on March 31, 2014 at 10:50 PM
please see attached, can you help solve this problem, the field in ie is longer than all the other browsers, appreantly opera does it too.
- JotForm Supportashwin_dAnswered on April 01, 2014 at 04:35 AM
Please inject the following custom css in your form and that should solve your issue:
width: 254px !important;
width: 254px !important;
Following guide should help you in injecting the custom css: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Hope this helps.
Do get back to us if you have any questions.
- noragoodAnswered on April 01, 2014 at 07:09 AM
- JotForm Supportashwin_dAnswered on April 01, 2014 at 07:19 AM
You are welcome.
I'm very pleased that I was able to help you.Do get back to us if you have any questions.Thank you!
- noragoodAnswered on April 03, 2014 at 07:22 PM
now on mobile iphone it looks like this?
- CesarAnswered on April 03, 2014 at 10:34 PM
I see that your screenshots contain elements not found on the form itself. Are those elements part of an image where the form in being embedded to? If so you may need to position the embed code properly for your page. Please provide the URL of such page so that we may assist you better. Thank you.
- designfacetAnswered on April 04, 2014 at 07:21 AM
Hi, Well The agent above gave me the code to fix the problem with desktop virewing, which did fix it. I know this is not a mobile version but using mobile browsers it looks like this. Yes those text are palced on the background. If I move the bars or embed code then on desktop it will look odd. Anyways my question was why with the code above now it looks fine on desktop browsers but on mobile it is screwed up? btw I am the designer behind this, that is why I responded on behalf of nora.
- JotForm Supportashwin_dAnswered on April 04, 2014 at 10:36 AM
Please share your web page URL where you have embedded your form. Your form does not have the labels which is overlapping in the screenshot which you have shared above. Your form with its direct URL looks like this:
We need to check your webpage to be able to help solve this problem. I remember last time when I provided the custom css code, the labels were part of your form.
We will wait for your response.
- designfacetAnswered on April 04, 2014 at 11:08 AM
The client wanted that certain font and you did not have that font family. That is why I put in my own lables.
- jedcadornaAnswered on April 04, 2014 at 12:35 PM
I'm testing your site using an online emulator and the Name, Email and Message are properply aligned. Since you are using those as your background and is not part of the form. You can try adjusting the positioning value.
Here's your code:
position: absolute; left: 580px;
You can edit and decrease the number of the position value to test whether it is properply aligned when viewed on iphone.
- designfacetAnswered on April 04, 2014 at 12:43 PM
Thank you for your response, many of these emulators do not work similar to tha tof iphone and other mobiles. The one I use is a this
I just rendered it with different iphone modules and the results were the same.
I am not concerned about this now, because only on mobile it looks like this. I will be developing a mobile site and will fix this, just letting you know that why does it look okay on desktop browsers but on mobile it does not?
Your soultion of moving values will effect the desktop look and I do not want that.
- JotForm SupportTitusNAnswered on April 04, 2014 at 02:35 PM
Emulators are hardly accurate - if anything - you need a virtual OS - the actual SDK to emulate mobile environments on your computer - such that you will be running the actual IOS on your computer to get accurate outputs to your test-
We use Browserstack to troubleshoot as well -
Chrome also has a neat emulator that really hits close to home -try it out:
Having said that - different browsers render HTML elements differnetly because each has their own defaulting Style Sheet if the current rules cannot be implemneted
When you are working with a mobile environment - one of the best ways to make sure it works on desktop and mobile browsers is to make the width dynamic -
/*Begin by declaring the main div container's maximum width*/
/*Then make the elements/classes/id's fit dynamically to 100% of the maximum width*/
I notice that you are working on a new form - once you've completed the form design - let us know and we shall advice with CSS that will align everything dynamically - that is, if you would like to.
Note - the above method will put the field labels above the text-input fields - may not be a big deal - but just thought you should know.
Looking foward to your response.