Field Manager app > Fields put in absolute positions via CSS in different locations in Field List causes problems with image presentation

I'm working on a cloned version of my "live" form that allows a user to specify colors for a spinnaker sail.  The user specifies a color for each of 42 sail panels in 42 dropdown fields.  Based on their selection, I show an image of that panel in the color they selected.  All the panel images are png files (all the same size as the whole sail) where everything is transparent except for the panel in question in its proper place within the sail. I have > 400 wee image files since each of the 42 panels can come in > 10 colors.  All the images are placed in the same absolute position on the form and shown conditionally.  On the bottom (jpg) and top (png) of the stack of images, I have images of the sail outline and divisions showing all the panel locations.  Brute force!

In the productional version, all my conditions work. In my test cloned version, most conditions that are supposed to show a png file sail image if the panel dropdown is filled do not seem to work .  Bottom section panel 1a and 1b statements for all colors appear to work fine, but they're the only panels working.  

In the cloned test form version, I've moved fields around and added collapsable sections to contain all the panel color dropdowns.  The panels are now divided into three sail sections: Bottom, Middle, and Top.  The collapsing sections themselves seem to work fine.  The two working panel dropdowns I mentioned above are within one of the new collapsable sections (Bottom) along with many others dropdowns that don't work. 

I have no clue what is wrong or how to trouble shoot this. Hoping you can help me!

The test form is:

https://form.jotform.com/200475943819968

https://form.jotform.com/200475943819968

https://form.jotform.com/200475943819968

Hi @bdoodle!

Thank you for contacting our support team.

After running tests on both of your forms I am seeing the issue that you are mentioning, in the test form only the bottom panels change color and the rest do not, yet in your live form, everything seems to be working correctly.  

This issue can perhaps be related to the images that you have uploaded, they may have not all transferred over correctly from your live form to the clone form. I've checked your conditions on both forms and they are for the most part completely identical. It does seem that you've added more conditions to your clone form than you have on your live form, have you attempted disabling the new conditions to test if they are interfering with the color change conditions?

I would also suggest that you remove the images where you are updating the colors and then add them again to test if this resolves the issue. They may perhaps need to be re-uploaded in order to display correctly.

Please do test the solutions mentioned above and get back to us with your results so that we may investigate this matter further, we look forward to your response!

 This is what I can report:

1.) If you use a browser's developer tools to inspect the page with this cloned form on it, you see that only the images for Panel 1a and 1b appear (10 times each, once for each color) out of all the sail panel images. In the code, you do NOT see the images for the other 40 panels.

2.) If you look at the cloned form with Jotform's Field Manager application, the images that are showing up on the page (Panel 1a and 1b in various colors) all appear at the top of the field list.  All the other image fields do appear on the list, but they are at the end.  (This is also the case for the original form which works fine.)

3.) I removed the image file source for the Grey Panel 21b and reloaded it.  However, the image still does NOT appear when the 21b color dropdown selection is Grey.

4.) I did NOT delete the image and redefine it from scratch because I didn't want to lose the conditional statements and CSS associated with the original.

5.) I did NOT disable my new conditional statements because they don't relate to showing the images.  They involve showing other fields depending on a new radio decision field and the like.

6.) I cloned a second time the same form I cloned to create the form I'm having problems with.  It works fine and all images appear when and where they are supposed to.  NOTE: I made no changes to the second clone while I made a lot of changes to the first clone.  I added collapsible sections there, and I used the Field Manager to:

a.) add some fields from a different form and to

b.) move fields around because I was unable to drag fields to the proper new position in some cases and because one can move a lot of fields at once with the Field Manager instead of one by one via the form Builder.

The first three items above are especially concerning.  They make me think that I should try again to change the form starting with the second clone.  I don't know what caused the problem with the first clone, but perhaps it was all the changes I made via the Field Manager.  It will be a lot of rework so please let me know if you agree or have a better idea.

Thank you.

(FYI, I'm doing all this because the original form does not work on a phone or other small screen.)

Let me conduct a few tests on this and get back to you on this thread as soon as I came up with a better suggestion.

More stuff to report:

I changed the CSS to put the absolute position of 5 panel color images, 5 different colors for panel 21a, somewhere I could see them.  (Top 250px, left ~ 300px... #id_1005-1009)  You can see the images in Build mode. 

I then disabled the conditional statement that shows the blue image for 21a. (Condition # 239)  Since the image field is not hidden, I should now see the blue image when the form is previewed or presented by a browser.  I don't!

I just checked the form and I can see that the blue image for 21a now shows at the bottom:

My understanding is that you want these colors to appear here:

If so, I think you need to review the CSS positioning of these images so as to make it appear in the preferred location in the form.

 Hello,

I didn't notice that the panel images appear on preview at the bottom of the form.  Interesting! 

However...

It does NOT show on the webpage itself. (See snippet below.)  Look for yourself here: https://www.madsails.com/Specify_FS_TR_spinTest.html

Can you account for this?

Also, the CSS I altered that places the panel 21a blue image (and four others) in an absolute position nearer the top of the page uses similar code to the code that places all color images for panel 1a and 1b (that appear properly) except that the panel 21a blue image is put higher and to the right, not at the bottom of the form.  (See snippet below.)  Is something wrong with this CSS?

Snippet of form on test page on server:

Snippet of CSS showing positioning of lots of panel images in proper locations (top: 440px and left: 0) and panel 21a images in several colors nearer the top of the form and more to the right.  (Only blue is shown unconditionally.  It is #id_1005 I think.)

Hi @bdoodle!

I do apologize for the continued issue.

I have checked the webpage that you have provided for us and after inspecting the page elements I have found that only the images for the bottom panels 1a and 1b are actually included in the markup. There is no issue with the CSS that places the panels in the correct position.

As you can see in the following screencast of the elements of your website, only the bottom two panels are changing colors when removing the display: none style:

Once I reach the end of the iFrame, there are no more images included that would be used to fill in the colors of all of the other panels. I do believe that your CSS is correct and should work, however, I was able to count only 20 image elements for the panels and as it seems in the screenshot of the CSS there should be far more included.

As I've mentioned in my earlier response, you may perhaps want to remove the images from the form and then re-add them again to ensure that they are being included in the markup. Also, you may want to remove the embed code from your form and after adding your images you can generate the new iFrame code and re-embed.

Please do get back to us with any updates or other information that you feel may help us find the solution to this issue, we are more than happy to continue providing support!

As your screencast shows and as I said earlier, the images don't show up in the website code itself. They do show up in the form from which this form was cloned, and I did not delete them from the cloned form. 

There is ample evidence that the other images besides those for panels 1a and 1b do exist somewhere associated with this form.  e.g. They are listed for the form in your Field Manager application.  The images actually show up in Jotform preview mode.  They also show up in form Build mode. They just don't make it to an actual webpage.

If I removed the images from the form and recreated them as you suggest, I would have to redo over 400 conditional statements and redo a lot of CSS to deal with the new fields and absence of old fields.

As I said in my post above dated February 19, 2020 at 11:54 PM, I will instead redo all the changes I want in a new clone of the original form.  Since the problem cannot really be identified and understood, it is clear that no magical solution will be found to fix the current form.  Note: When I cloned the original form a second time and made no other changes, the images were all there on the webpage and worked.  So, I suspect that the Field Manager application I used to move things around and add a few fields on the first cloned form caused the problem.  I will use it sparingly when I do the rework on the second clone.

Just for yuks before I give up on the first cloned form, I may try to use the Field Manager to move all the images now at the bottom of the field list to the top where the images for panel 1a and 1b sit and retest it. 

Thanks for trying to help.

For your information, I moved all the images up in the field list using the Field Manager.  I now see many more of the images, but not in the right place.  See below.  Also, the images showing the outline of the sail that are supposed to be shown unconditionally, do not appear at all. This seems to confirm my suspicion that the Field Manager App is (part of?) the problem.  Anyway, I'm now abandoning this form.

Hello @bdoodle,

We do apologize for the continued issue, it seems that you are correct in stating that this is directly related to the field manager app since you have been able to move the images in the app and are now able to see them in your form. I have also checked your form and can confirm that there are images are appearing in random places of the form. 

However, please do let us know if this issue persists in any of your other forms so that we may escalate the issues to our backend team for further review. We hope this issue is now ended but please do not hesitate to reach out again if you have any further questions or concerns.

I re-cloned my original form (new clone = https://form.jotform.com/200497207678968)

and moved everything around, and the presentation of color images worked.  (I'm having issues lining up the color panels and the outline, but the panel color images were all showing up when appropriate.)  Then, just now, I defined four collapsable sections containing the dropdowns that control panel color presentation, and all of the sudden, I'm having the same problem described above again!  i.e. Only the color images for Panels 1a and 1b appear.  So, the problem is not caused by the Field Manager, but my use of collapsable sections.  I would really like this to be fixed because using collapsable sections would (if it worked) lend itself nicely to my requirements.  Given this new information, please look into the issue again.  Thanks!

https://www.madsails.com/Specify_FS_TR_spinTest.html

Hi,

I have read the thread, correct me if I'm wrong the issue only exists in the embedded form but everything is working perfectly when using the form's direct link, correct? I can see that you have embedded the form on your website using the iFrame code, would you perhaps try re-embedding your form using the Embed codes: Embedding-a-Form-to-a-Web-Page. 

For reference: Which-Form-Embed-Code-Should-I-Use

 No. That is not correct. The problem occurs whenever the form is executed... every time.  It happens in Preview mode and when using the form's direct link. 

I said that the images appeared in Preview mode above to prove they exist in the form definition.  Showing an image in its proper place when that image color is selected in one of the panel color dropdowns is what doesn't work.  So, the way I embed the form code on my website is not the problem. (BTW, I do not use the iFrame embed, but the regular script embed.)

The images were presented properly until I introduced the collapsable sections.  As Felipe indicates in his post in this thread dated February 21, 2020 at 04:29 PM, this issue should be relayed to the backend team.   Thank you.

I did a quick look at your form and it seems there is no issue with the conditions but the issue is with the custom css code with absolute position you have for image fields. The images are being displayed correctly but because of absolute position and top position is causing this issue. Please check the screenshot below:

I would suggest you to please let us know where exactly and how you want to display the images and we will take a look.

We will wait for your response.

 Before I added the collapsable sections, the form worked relatively well.  The images (sail panels in a color) all showed up at the same absolute position as coded in the CSS.  i.e. They appeared near the top of the form (top: 595px)  on the left side (left: 0.)  All I did was add collapsable sections, and (booga booga) the images, except those for panels 1a and 1b, failed to show in their proper position right below the text "a panels  |  b panels" under (z-index = -500) the sail schematic and outline.  If I remove or disable the sections, I wonder whether things will work again.  If not, I can revert to a point before the last revision that added the collapsable sections.

Let's go step by step to understand the issue. I would suggest you to please first revert back your form to earlier revision where the images are displayed correctly. Once we are able to see that version, we will clone it and then we will try to understand how you want to display section collapse field.

Please revert back your form to earlier revision and then share the form URL so that we can take a look at the issue.

We will wait for your response.

Okay.  I have reverted to prior version of the form where the panel color images show up properly.  

What I undid is mainly the addition of four collapsable sections, one over the bottom panel color selector dropdowns, one over the middle panel dropdownss, one over the top panel dropdowns, and one over the fields at the bottom of the form after the top panel dropdown section. I set them up as section-visible and button-not visible. Then I added a single choice field that would allow the user to select which of the three panel sections they wanted to see. I don't think, but don't remember for sure, that I had yet set up the conditions to "show" the sections based on the value in the new single choice field.

Hi @bdoodle!

I have gone ahead and checked your first clone form once again and I am not seeing the images of the sail displayed anymore. It seems that one of the panels is appearing in a very random place on the page as you can see in the screenshot below:

After chekcing the page elements I am again seeing that the images are sporadically placed around the page and if you locate them one by one you can change their display: none setting off and see where they are positioned. However, if you change the absolute top setting to 0px the image seems to move to the position fo the original sail image.

Please see the following screencast for reference:

I believe that if you edit the CSS of the image positions you may be able to have them display correctly once again. I do understand that having to redo CSS for that many images is tedious work but I do believe that is the solution.

I also looked at your second clone form and everything seems to be working correctly there and I've noticed that the CSS is a bit different from the first clone. You may perhaps want to try copying the CSS from the second clone to the first and see if that solves this.

Please let us know if you require any further assistance, we are always happy to help!

 Felipe,

  You need to read this thread from my post dated February 23, 2020 at 04:25 PM forward. It is my second clone that we are focused on now. 

Hi @bdoodle - What my colleague Felipe trying to convey is that, due to the addition of the collapsible fields in the first form, the custom CSS codes to where to place the images should be reviewed as well if they are set to display in your preferred locations.

You were right. The absence of the collapsible fields makes the CSS worked as intended. So that means when you add collapsible fields, you should re-visit the codes as well and see adjust the properties as needed.

The collapsable fields are all lower in the form than the images assigned to absolute positions by my CSS.  When the images started appearing at the bottom of the form or not at all, how could I have possibly changed their absolute positions in CSS to make them work correctly?  (I have now reverted to a point before the collapsable sections were added in the second clone, at Ashwin_D's request. The images now do work properly, but I don't have collapsable sections.)

And how could an image set to appear at an absolute position near the top of the form start appearing near the bottom of the form after collapsable sections were added? An absolute position should remain in the same spot regardless of any new fields or changing positions of existing fields. Right?

Collapsible fields are used to split the form into sections and it could be the reason why it affects the rest of the elements or the absolute positioning of the fields.

SECTION COLLAPSE: Formerly known as form collapse, this is used to show/hide additional sections of the form. Useful in splitting your form into expandable parts.

Most likely that could be the reason why when it is added on the form it somewhat makes the fields scattered or spread out on the form. 

 Arrrrgh!

My current plan (for those of you who might actually be reading this thread) is to use the Field Manager to move all my image fields that now appear there at the end of the field list  (but which are shown in an absolute position at the top of the form via CSS code) to the top of the field list.  It seems like the collapsable sections feature divides the fields into sections as they are situated in this list, not as they appear on the screen.  The Field Manager application usually shows fields in the order from top to bottom as they appear on the screen, but most of my images appear on this list at the bottom.... I may have defined them last and only used CSS to get them to appear near the top of the form.  If my theory is correct, moving the image fields above where the collapsable sections start should fix the problem.  I'll report back.

Hello @bdoodle,

We do apologize for the inconvenience caused to you.

Please do get back to us with your results so that we may continue to investigate the issue if it persists after your changes are made. Hopefully making the changes you have mentioned in your Field Manager app will resolve the problem.

We look forward to your response!

 The form now works.  Using the Field Manager App, I put all the image fields (that appear at a specified absolute position on the form on the website) above the collapsable sections on the field list, and that did the trick.

@bdoodle,

This is great news, I am very glad to know that this issue has finally been resolved. 

I would like to apologize for the amount of time it has taken to find a solution to this issue and I hope that we may be of better service to you should you need our assistance again.

I also would like to thank you for all of the information you've provided and the detailed documentation in this thread as this will certainly assist us in the future. We will keep this thread as a bookmark for future reference.

Please do not hesitate to reach out again if you have any further questions or concerns, we are always happy to help!

FYI, after making some changes to my form, the panel images do not always show up on the webpage.  e.g. Each time you refresh your browser and select silver for the whole sail color, you'll probably get a different set of missing panel images. 

If you look at the Field Manager, all the images are at the top of the form.

If you inspect the executing code, it says the missing images were unable to be loaded by Jotform.  Most of the images were uploaded to Jotform via a file uploader a few years ago.  I have another production form that uses the same images without incident. An example of an image that is sourced this way appears below.  The image was successfully loaded in the code snippet below, but its load failed other times without any changes having been made to the form.

I have little hope that you can help the situation.  It appears that my choices are to revert back to a point before I added the collapsable sections and either...

- handle the hiding/showing of the groups of fields now in collapsable sections myself.

or

-always show the groups of fields and insert links to navigate from one place in the form to another.  (This intra-page linking does not work in FireFox, but this form is intended for use on mobile devices where I don't think Firefox can be used.)

If you think you can do something so the loading of images no longer fails in the current form, please let me know.

Hi @bdoodle!

I have taken a look at your Field Manager App and can verify that you have all of the images placed at the very top of the form. In your previous response, you had mentioned to us that doing this has resolved your issue.

Since the issue is now reappearing and this issue has been active for quite some time, I believe the next step here would be to forward this issue to our Developers Team so that they may take a closer look at this for you. I cannot provide an ETA for their response, however, when an update or solution is available you will be notified via this thread.

I do apologize for the inconvenience caused to you and for the long delay in resolving this issue.

Please feel free to reach out if you have any further questions or concerns, we are always here to help! 

Thank you

FYI, I removed the collapsable sections and found that I still had problems.  Then, I found one field that with CSS I give an absolute position (near the top of the form) that appeared in the Field Manager list near the end of the fields.  When I moved this work field (chg color, #id_1068) up the field list right below the images at the top, the form began working properly again... albeit without the collapsable sections I had wanted. So, I re-added the collapsable sections, and the form still works!

So, it's not really a problem involving the collapsable sections per se, but a problem when a field with an absolute position near the top is positioned improperly in the field list. As far as I know, this scenario only affects the proper presentation of images.

It might be a good idea to advise users setting fields in absolute positions to move them to their proper relative position in the field list with the Field Manager App.

I strongly recommend that you change the title of this thread to:

"Fields put in absolute positions via CSS, in different locations in Field List, cause problems with image presentation"

... or something similar.

Thank you for this additional information.

Let me add these to the escalated ticket for our developer's reference.

The thread's title has been updated as well based on your suggestion.