image alignment

  • Profile Image
    fitmealsmurray
    Asked on September 18, 2018 at 12:51 PM

    I am trying to add allergen icons to the description of my menu items.  I had inserted the  images into the text but want to be able to add hover text to the images.  I have shrunk the fields down so they are one one line but want them centered in my form.

  • Profile Image
    david
    Answered on September 18, 2018 at 01:21 PM

    Adding the following code to your form should get it close to what you are looking for:

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

    #cid_54 img.form-image, #cid_55 img.form-image, #cid_56 img.form-image {
        margin-right : -60px;
    }

    #cid_54 img.form-image {
        margin-left : 180px;
    }

    #cid_55 img.form-image {
        margin-left : -20px;
    }

    #cid_56 img.form-image {
        margin-left : -45px;
    }

    #cid_57 img.form-image {
        margin-left : -30px;
    }

    Here is how the form would look with the code added:

    https://form.jotform.com/82605702788969


  • Profile Image
    fitmealsmurray
    Answered on September 18, 2018 at 01:25 PM

    Thank you David, that is what I'm looking for!  However, I know less than nothing about coding...  if there are more or less allergen icons for a given menu item do those numbers need to change?  I will read the article you linked in your answer and hopefully it will tell me where to insert the code :)

  • Profile Image
    david
    Answered on September 18, 2018 at 01:28 PM

    The code is specific to those images and only changes the position of those images.  If you were to add more images, it would likely require similar code specific to the new images.

  • Profile Image
    fitmealsmurray
    Answered on September 18, 2018 at 01:42 PM

    Where do I find the field name for each image?  I'm looking under Properties -> Advanced and there is no Field Details section

  • Profile Image
    david
    Answered on September 18, 2018 at 01:49 PM

    Some fields do now show the ID and even if they did, it might be a different part of the field that needs to be targeted.  The easiest way to get the ID for the specific element you want to adjust would be to open the form in the advanced designer:

    1537292770Capture.PNG


    Select the CSS tab, then single click on an element to bring up the appropriate ID for all elements of that type or double click to bring up the ID for that specific element:

    1537292956AdvancedCSS.gif

  • Profile Image
    fitmealsmurray
    Answered on September 18, 2018 at 02:20 PM

    OK, I got it pretty close to where I want it and I click the save icon on the left side of the screen, it saves and changes to the preview icon.  Then when I click "go back to builder" it asks me if I want to discard my changes.  My choices are cancel or OK.

  • Profile Image
    david
    Answered on September 18, 2018 at 02:28 PM

    After you click save, once the process completes the changes were saved.  Sometimes the advanced editor still shows they weren't but if they process completed already, they definitely were.  As a safeguard though, I would recommend highlighting and copying your current code in case it does get removed, though it shouldn't.