How Can I Line Up Images With My Form

  • Profile Image
    Asked on January 11, 2012 at 09:02 AM

    First let me say I love JotForm.

    I have a form being used in the Ordering Information tab of this page:

    I want to line up images directly to the right of each form element section, but can't find how to do this in the JotForm tool. Sooo, I've divided up using a <table> as a hack solution. However, the images don't line up perfectly in both Firefox and IE.

    Any idea on how I can line up images directly to the right of each element using my JotForm?

    Any help is appreciated. Thanks in advance :-)

  • Profile Image
    Answered on January 11, 2012 at 11:29 AM

    It might be a bit of a longshot but instead of combining margin and padding values to position the images, try using just padding, with just a single class to define that padding for each image.

    Of course, the problem with this method is that you wouldn't be able to have the 1px thick gray border around each image. However, making the border actually part of the image instead of having it rendered via CSS would fix that. (Although, that's not the preferable solution.)

    Some "googling" I did on browser inconsistencies re margins seems to suggest that there's a better solution involving floating content (as discussed here) but I'll need to research it some more before I can provide a definite solution.

    Hopefully, in the meantime my colleagues can provide a solution or two.

  • Profile Image
    Answered on January 11, 2012 at 12:07 PM

    Yes, I would suggest avoid using tables to format elements on your webpage. 

    With how your form is configured, I dont be believe there is anyway to get your images aligned as you want on JotForm itself, so some kind of hack seems called for.

    I put together a quick and rough bit of CSS & HTML with floating divs which should give you much more control over how those individual images are aligned on your webpage. 

    code ->

    result ->


    Now this code needs a little bit more tweaking to get absolutely right, but I feel its the route you should probably be taking. 

  • Profile Image
    Answered on January 12, 2012 at 09:43 PM

    Ahhh ...  I see. Thanks for the sample code. I'll give that a shot.