I have a fully customised form and the quantity boxes have slipped down too far below the images, please can you help

  • Profile Image
    swindells
    Asked on October 02, 2017 at 08:24 AM

    Hello, I have a very special customised form created by Abajan. I have been updating it recently with new images but the quantity boxes have slipped down the form, so it looks really odd The first couple of lines of the form are okay and then they slip. The form is made of code that I edit externally then I add images on my Jotform account and link to them on the code.

    Please can someone check if they can see what has happened here. 

    Thank you very much,

    Sophie

  • Profile Image
    BJoanna
    Answered on October 02, 2017 at 10:27 AM

    I inspected your form in Google Chrome and in Mozilla Firefox, but I am not able to replicate mentioned issue.

    Were you able to resolve this issue?

    I only noticed that the dropdown fields are a bit overlapping with the images. You can resolve this issue by adding this CSS code to your form:

    .form-dropdown {

        margin-top: 10px;

    }

    How to Inject Custom CSS Codes

  • Profile Image
    swindells
    Answered on October 02, 2017 at 07:18 PM

    Hi, I tried adding the code to the CSS as you suggested but it made the problem worse unfortunately and the drop down boxes were even lower so I removed the code. Near the top of the form the drop down menus are in the right position but as you scroll down they get lower and lower. Have you any other ideas what could cause this? Please could you take a look at the CSS and see if there's anything that looks odd there?

    Thank you,

    Sophie

  • Profile Image
    Kevin_G
    Answered on October 02, 2017 at 10:47 PM

    I was able to replicate the issue with the direct link on your form, the issue seems to happen due to the way how you've created the table and how you have displayed the drop down fields over the images. 

    I'm currently working to have the fields displayed properly, please allow me some time and I will get back to you as soon as possible. 

  • Profile Image
    Kevin_G
    Answered on October 02, 2017 at 11:27 PM

    I have been reviewing your form and I can see you have a lot of select boxes handled with CSS, all of them have a position absolute property and you may need to handle their positions with single lines of CSS code, at the same time you need to edit the source code of the table and increase the height of each cell as the select boxes need to be displayed right below each image. 

    I can see you're embedding your form using the source code so I think would be better to do the changes directly on your source code, just make sure you do not alter the name of the select boxes, you may copy just the field and paste it inside the table where you have the images. 

    Sample code of a select box: 

    <select class="form-dropdown" style="width:150px" id="input_3" name="q3_doggiePile">

                  <option value="">  </option>

                  <option value="6"> 6 </option>

                  <option value="12"> 12 </option>

                  <option value="18"> 18 </option>

                  <option value="24"> 24 </option>

                </select>

    This should display the images and select boxes as you want, instead of having to develop the CSS code. 

    How-to-get-the-Full-Source-Code-of-your-Form

    I hope this helps. 

  • Profile Image
    swindells
    Answered on October 03, 2017 at 04:50 AM

    Hi, thank you for your response. I'm a bit confused as to what you mean, I can't see where to change the height of the select boxes, there is an option for width but not height. Do I need to add CSS code before each select box? It's so odd that some of the drop down menus have slipped and am thinking there must be a reason for that. All i've done is add new images and link to them on the full source code which I edit separately from Jotform. I just use Jotform to upload the images. Please can you tell me what you suggest I change in the select boxes?

    Thank you very much

    Sophie

  • Profile Image
    Nik_C
    Answered on October 03, 2017 at 05:35 AM

    I'm not sure what my colleague was referring to. What I don't understand is if you're experiencing this issue on any Browser while viewing the URL: http://www.sophieswindells.co.uk/Sophie_Swindells/orderform.html

    I tested in Chrome, Safari, and FireFox, but I wasn't able to replicate any issue:


    On the other hand, I was able to see the problem on direct URL. 

    So I would rather increase the height of the each cell of your table:

    Also, I noticed that you have two titles, so the bottom one should be removed:

    You can check my clone of your form: https://form.jotform.com/72752270251956 I adjusted first 2-3 rows so you can see how it looks.

    Let us know if it could work for you.

    Thank you!

  • Profile Image
    swindells
    Answered on October 03, 2017 at 06:34 AM

    Hi, I've tried the form on different browsers and weirdly it's fine on Safari but not on Chrome. The top of the form (as in your screenshot) is fine anyway and the boxes are in the right place. The problem is as you scroll down they get lower when viewed on Chrome browser.

    The version of the form you see in Jotform is not the actual form, that's why the images don't match the ones on the actual URL. I'm not sure quite how it works but those images are old now and I update the images purely using external code and add only the images into Jotform and then delete them. So what shows on the form is not correct. I do go into the form and take out the CSS code, add new titles and then update the relevant names for the images to add on the code of the form but I don't know if this is necessary as the code changes are all done separately, so a bit confusing I know! 

    The source code you highlighted there is an old source code and the so I can't locate the section you mean. Please could you view the source code from the URL to see the actual one: http://www.sophieswindells.co.uk/Sophie_Swindells/orderform.html

    Thank you for your help

    Sophie


  • Profile Image
    candy
    Answered on October 03, 2017 at 10:22 AM

    Dear Sophie,

    I have also checked your website and your form. I have also cloned your form on my side in order to test it. I have seen that you have used source codes of JotForm while embedding it into your website and then, you have written lots of CSS codes in order to re-design the form. I have seen that there is a lot of work and effort, your form looks very well to me.

    I have checked your website on Google Chrome, Mozilla Firefox, and Safari. However, I do not see any problem with the form on Google Chrome as you can see the comparing screenshots below:

    Regarding your comment "..add only the images into Jotform and then delete them. (...) I do go into the form and take out the CSS code, add new titles and then update the relevant names for the images to add on the code of the form but I don't know if this is necessary as the code changes are all done separately, so a bit confusing I know!" If you change the form in Form Builder, it will not affect the form embedded in your website as you have used source codes. So, updating your form in the form builder (JotForm account) is not necessary anymore. 

    I have checked the source codes. I do not see any problem.

    Please let us know if you need any further clarification or assistance. 

  • Profile Image
    swindells
    Answered on October 03, 2017 at 11:43 AM

    Here's my screen with Chrome:

    Thank you for checking the browsers. It's odd because your screenshot of Chrome looks so different to the way I see it. On my screen the dropdown boxes are in a totally different position. I am now wondering if it's something to do with the screen it's viewed on, pretty odd. On my screen Safari looks good but Chrome doesn't. Anyway, never mind, it's good to know on other screens it looks okay. 

  • Profile Image
    Nik_C
    Answered on October 03, 2017 at 11:48 AM

    Maybe it is the screen size related, maybe version of Chrome or something third, but I see the same like my colleague, the fields are showing perfectly fine in all Browsers.

    If you experience any further issues please let us know.

    Thank you!

  • Profile Image
    swindells
    Answered on October 03, 2017 at 11:54 AM

    Okay, thank you for your help. I will try it on different screens and see.