What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

  • Profile Image

    Placing an image on the SIDE of a text box, of another image, etc.

    Asked by arpajo on October 14, 2011 at 04:57 AM

    Hello,

    I would like to accompany some of the questions in my survey with an image, and I don't really want this image to be below or above the text box. As well, there is a point in the survey where I would like to have 2 images at the same height, not one above the other one. Is this possible?

    Thanks very much,

    Roberto

    survey height
  • Profile Image
    JotForm Support

    Answered by NeilVicente on October 14, 2011 at 05:06 AM

    Shrinking the fields will allow you to place fields such as text boxes, images, etc. side by side.

    Right click on the field then clink Shrink:

    Feel free to search the support forum or the user guide section if you have questions such as this.

    Here are sample articles and topics relating to your question:

    http://www.jotform.com/help/90-How-to-Place-Two-or-More-Fields-on-the-Same-Line

    http://www.jotform.com/answers/44010-How-to-remove-the-space-here-Screenshot-

    If you can't find the answer in the search results page, ideally that is the time to open a new topic to ask for assistance.

    Hope this helps.

  • Profile Image

    Answered by arpajo on October 14, 2011 at 05:10 AM

    Ok perfect! I tried to search for it before, its just that for this topic I introduced the keyword side ("side by side") and i didn't get any interesting thread. But thanks for everything!

  • Profile Image

    Answered by arpajo on October 14, 2011 at 05:14 AM

    Its pretty strange, when I press on "Shrink", it expands even more! And then, when I click "expand", it shrinks! When I press "Shrink", how much should it shrink? To half its width? Thanks!

  • Profile Image

    Answered by arpajo on October 14, 2011 at 05:20 AM

    To be more specific, what I want is to shrink is a HTML text box.

  • Profile Image
    JotForm Support

    Answered by idarktech on October 14, 2011 at 05:37 AM

    Hi Arpajo,

    We don't have problem reports on shrinking options at this time so I am pretty sure it should work on your side.Using shrinking option would also depends on your form width which simply means the bigger form width you have the more fields you can have on the same line. If you don't mind could you redo again the shrinking and tell us how it goes? Thank you.

    ~idarktech

  • Profile Image

    Answered by arpajo on October 14, 2011 at 05:52 AM

    It's pretty strange, the only thing I can shrink are images, everything else such as radio buttons or HTML text, expands even more when I click "shrink". Gonna try in another browser...

  • Profile Image

    Answered by arpajo on October 14, 2011 at 05:55 AM

    It happens in Firefox as well...

  • Profile Image

    Answered by arpajo on October 14, 2011 at 06:19 AM

    Does it still work for you, idarktech?

  • Profile Image
    JotForm Support

    Answered by idarktech on October 14, 2011 at 06:39 AM

    Sorry to say I wasn't able to replicate the issue, you can check my form here which displays 3 fields on the same line. Can you share us the form where you are having trouble with? We will wait for your response. Thank you.

  • Profile Image

    Answered by arpajo on October 14, 2011 at 06:45 AM

    Here is the form:

    http://www.jotform.com/form/12855344183

    The image of the koala is just above a text, I wanted to shrink that text in order to put the image of the koala on the right, but the issue I've stated before (expands instead of shrinks) takes place. Is there any way you can access to my "form editor"? Maybe you will the problem there...

    Thanks,

    Roberto

  • Profile Image
    JotForm Support

    Answered by abajan on October 14, 2011 at 06:56 AM

    I see what you mean: In this instance, Shrink and Expand are indeed doing the opposite of what they should. We'll need to investigate why this is happening and get back to you with a solution (hopefully shortly).

  • Profile Image
    JotForm Support

    Answered by idarktech on October 14, 2011 at 07:01 AM

    Please take a look at your form now and reply here if that's what you mean. Resizing on your sentences inside the free text (html) field and also the image solves the issue.

    But, this is actually a problem, as what my colleague said we will further invistigate on this matter. Thank you for bringing us the idea.

    ~idarktech

  • Profile Image

    Answered by arpajo on October 14, 2011 at 07:43 AM

    Hey,

    So here is how things are at the moment:

    The text from wasn't "wrapped", the sentences were cut off after a certain length and then the remaining text from that line was added to the next line, and so on until the end of the text. The problem with this is, I'm setting up the form, but I'm not actually the one who is going to use it, so I'll have to show someone in the organization to use it. It would be confusing to tell them that for an image to be placed to a side each sentence has to be chopped off manually to a certain length (and every time you add any text, you will have to chop if off again, as it doesn't wrap). I was hoping the text to be wrapped when shrinked, and then expanded automatically when I clicked "expand", and viceversa. 

    Secondly, I prefered the image on the right hand side of the text, so I moved it. Once I moved it, I didn't have the option to put it on the right hand side nor even could I place it back on the left hand side, i had to place it on the bottom or on the top of the text. So this means that even with "shrink" working (well, working but not how its supossed to) I wasn't able to change the image from the left hand side to right hand side, I could only place it on the bottom or on top of the text.

    Thanks,

    Roberto

  • Profile Image

    Answered by arpajo on October 14, 2011 at 07:45 AM

    Sorry, fast update: 

    Placing the image on the left hand side is working now. Placing it on the right hand side, however, still doesn't work.

    Thanks,

    Roberto

  • Profile Image
    JotForm Support

    Answered by idarktech on October 14, 2011 at 10:01 AM

    Hi,

    I have cloned your form, made some test and figured out why you can't move the shrinked field. It is because of the form width which is smaller than the two fields width when combined. Could you please try increasing your form width to 800 for a test? and then try drag and drop your fields on both sides? Also, when dropping a certain field you should wait for the background to appear which is your hint that the field can now be dropped on that particular area.

    Please give us an update on how it's going.

    Looking forward to your response.

    ~idarktech

  • Profile Image

    Answered by arpajo on October 14, 2011 at 10:11 AM

    Hey,

    It works in the left hand side, but not on the right hand side. As i'm not changing the widths of the objects, if they are able to lie on the same line when the picture is on the left then it should also work when the picture is on the right. 

    At the same time, I think that manually "chopping off" the HTML text to get a certain width has messed up the HTML box, sometimes it just dissapears or goes blank when I'm moving it, and  then if I press "undo" it doesn't come back, so I have to close the form without saving in order to see the HTML box again.

    Thanks, 

    Roberto 

  • Profile Image
    JotForm Support

    Answered by abajan on October 14, 2011 at 01:16 PM

    Injecting the following CSS will move the image to the right of the text:

    #id_46 {
    float:right;
    }

    Please let us know if this solves the issue.

  • Profile Image

    Answered by arpajo on October 14, 2011 at 01:29 PM

    Hey,

    The image went to the right, but never at the same level as the HTML text. At the same time, i'm a bit worried about the solution i was proposed here - manually chopping off text from lines so that I can shrink the HTML text box? Shouldn't it automatically "wrap" when it gets shrinked?

    Thanks,

    Roberto

  • Profile Image

    Answered by arpajo on October 14, 2011 at 01:56 PM

    Hello,

    And the "shrink" issue isn't solved yet, as when the text is set back to normal (full-length lines, not chopped off), the problem of "expanding when it should shrink" continues.

    Thanks,

    Roberto 

  • Profile Image
    JotForm Support

    Answered by idarktech on October 14, 2011 at 04:12 PM

    Here is a cloned form of yours which actually working on my side without problem. I can drag it both sides as I used 750 Form Width. Would you mind editing your text inside your HTML box field? Edit it on HTML view and remove all the <div> and </div> codes, shrink it again and move it align with your image? 

     

    If this doesn't help just let us know so we can continue to assist you. Thank you.

  • Profile Image

    Answered by arpajo on October 14, 2011 at 05:56 PM

    idarktech,

    I already said that it works on the left hand side, but what do did for that to work is you chopped off manually each line, i don't think that's how its supposed to do really, because, then every time you want to edit it you have take very long chopping off the lines again! 

    Still, the form you showed me shows the image on the left hand side, not the right hand side. As i said before, I wanted it on the right hand side. 

    It still does not work. The main problem is that the HTML box expands when it is supposed to shrink, basically.

    Thanks,

    Roberto

  • Profile Image
    JotForm Support

    Answered by idarktech on October 14, 2011 at 07:35 PM

    Hi again,

    I do apoligize for not making it clear, I think you missed something on my part. As I have stated that I can move it on both sides, that means either left or right (you can check my form again). 

    Since I was able to replicate your issue on shrinking, I will submit this to our higher ups so they could look into it further. They will reply on this thread once they come up with solution. Thank you so much for your patience.

    ~idarktech

  • Profile Image

    Answered by arpajo on October 14, 2011 at 08:08 PM

    Hey,

    I was finally able to put it on the right side of the text, but by "manually chopping off" each line from the text so that it's able to "shrink", which just doesn't sound right. Hope the problem gets fixed.

    Thanks very much for your help!

    Roberto 

  • Profile Image

    Answered by yasinco on October 14, 2011 at 08:10 PM

    Your welcome and the problem will be looked into further i'm sure!

    Thank you for using JotForm.

    ~Yasin 

  • Profile Image
    JotForm Support

    Answered by abajan on October 15, 2011 at 04:08 AM

    Arpajo, I'm curious about something. After I provided the injected CSS solution above, you stated that "The image went to the right, but never at the same level as the HTML text." When I cloned your form and injected #id_46 {float:right;} it worked, as can be seen at http://www.jotform.com/form/12861223720. So I'm wondering if you changed something before injecting the CSS.

  • Profile Image

    Answered by arpajo on October 15, 2011 at 04:18 AM

    Abajan,

    In my last answer, I stated that I was able to put the image to the right. Even without the CSS, it worked. So, as I stated before, thats not the problem any more. The problem is having to manually chop off every line from the HTML text in order for the "shrink" tool to work. If I don't lessen the length of every line by manually hitting "enter" at some point of the line to send some text to the next line, when I click "shrink", it actually expands, a problem that you said you also had yourself.

    Thanks,

    Roberto 

  • Profile Image
    JotForm Support

    Answered by abajan on October 15, 2011 at 04:26 AM

    I understand all of that but my question was if you changed something in the form at that time before injecting the CSS that caused the solution not to work on your end when it did on my end. I'm trying to figure out why the image didn't appear at the same level as the HTML at that time. I'm not referring to anything you did subsequent to that.

  • Profile Image

    Answered by arpajo on October 15, 2011 at 04:38 AM

    I didn't really do anything - for it to work, I just erased the whole HTML formatting, I copied the text again into the HTML box (from a Word document), then I manually chopped off every line (which I shouldn't have to be doing), and then it worked.

  • Profile Image

    Answered by arpajo on October 18, 2011 at 11:54 AM

    Hello! Any news about this issue? Thanks! :)

  • Profile Image
    JotForm Support

    Answered by idarktech on October 18, 2011 at 07:38 PM

    Hi,

    Thank you for contacting us. We appreciate you for sharing your idea with us but we are very sorry for we can't give you an ETA due to the current workload of our developers. I have set this report to Important for them to be notified and check what they can do. Meantime, you can stay on the workaround that we have stated above. Thank you for your patience.

  • Profile Image
    JotForm Support

    Answered by emrew86 on October 20, 2011 at 02:36 AM

    Bug has been fixed...

  • Profile Image

    Answered by arpajo on October 20, 2011 at 11:53 AM

    Hey,

    It still doesn't work for me. When the text is the full width, when I press "shrink", the text expands even more. I still have to do the unpractical workaround (chopping manually each line so that the lines "seem" shorter, and then it will shrink. But that shouldn't be the solution!

    Here is my form again, if you wanna see what happens:

    http://www.jotform.com/form/12855344183

    Thanks,

    Roberto 

  • Profile Image
    JotForm Support

    Answered by emrew86 on October 20, 2011 at 01:24 PM

    Hi arpajo, can you try again after cleaning cach? I couldn't see any problem. And can you add a screen please ?

  • Profile Image

    Answered by arpajo on October 20, 2011 at 04:07 PM

    I want to place an image to the right side of the HTML box, and that's why I press "shrink". When I press "Shrink", this is what happens (and this is with another form, having cleaned the cache of Google Chrome) - link to this form: http://www.jotform.com/form/12925859158

    Here is a screenshot of what happens when I press "Shrink":

    Shrinking problem

  • Profile Image

    Answered by arpajo on October 20, 2011 at 04:08 PM

    I want to place the coffee mug on the right hand side of the HTML text box.

    Thanks,

    Roberto 

  • Profile Image
    JotForm Support

    Answered by fxr on October 20, 2011 at 05:53 PM

    Hi Roberto.

    If you place the following at the top your embed HTML code: 

     

     

    <div style="width: 450px; padding-right: 150px; background: url(http://www.jotform.com/uploads/arpajo/form_files/coffee.png) no-repeat right center; background-size: 10em;">

    then at the very end of the code add:

    </div>

     

     

    You should get the effect you want: I have a cloned example of your form here:

    http://www.jotform.com/form/12922229343

     

    note: I made the width of your form 600px in Preferences -> Form Styles -> Form Width, you can play around the padding-right & background-size properties of the inline css. 

    note2: background-size is a CSS3 property and wont be compatible with older browsers. IF you have the capability, its probably better to resize your image down to your desired size in an image editting program and remove the background-size propery from the inline css. 

  • Profile Image

    Answered by arpajo on October 20, 2011 at 06:02 PM

    Thanks for the detailed answer, Fxr.

    I can implement this solution myself. However, I'm designing these forms for someone else who isn't as familiar with HTML or CSS. So, what would be great for him, would be for the text to shrink when he clicks "shrink", and expand when he clicks "expand".

    You know what I mean? Why isn't the "easy way" working? 

    But thanks again though for your solution, I will keep it in my mind; still I hope you understand my situation! 

    Roberto

  • Profile Image
    JotForm Support

    Answered by fxr on October 20, 2011 at 06:31 PM

    Yes, Roberto, I do understand your situation.

    I did notice the shrink & expand on your form still doesnt quite work as you'd expect.

    One thing I will say, however, is the that the Free HTML tool is in there as an advanced feature; it helps provide JotForm functionality that just isnt available in JotForms current standard feature set. Its almost by defination there for user hacks & workarounds.

     

    Also, adding HTML tags directly into JotForm code can introduce strange bugs not only into your live form, but also, as I believe is the case with your form, into the JotForm form creation interface itself.

    Its very difficult for the developers to plan for every possible permutation of HTML that users can drop into that HTML text box, there is an infinite set possibilities. 

  • Profile Image

    Answered by arpajo on October 20, 2011 at 06:42 PM

    Hey Fxr,

    I understand what you mean. For now i'll try to find using other "tools" that don't have so many "exceptions", or i'll leave the image on top of the text.

    Still, could it be possible to submit a request for the developers to fix the "shrink" and "expand" button? For example, the shrink button is very handy if you want to put 2 images next to each other. Putting text next to an image is also something that can take place fairly often. 

    I know that there is no immediate solution for this, but could this request be made for developers? Putting an image next to a certain text is something I constantly do in Word documents, powerpoints, etc... on a form it would also be perfect.

    Thanks a lot

    Roberto 

  • Profile Image
    JotForm Support

    Answered by fxr on October 20, 2011 at 08:53 PM

    The ability to put images to the right of elements in JotForm does exist, its just not working properly with the Free text (HTML) tool in some instances. I have however recreated your problem exacty on a very basic form.

    I have submitted a detailed report to the developers for them to consider. 

    Thanks for concerted efforts in pushing for a proper resolution, I feel I am now closer to understanding the exact nature of the problem.

     

    This style of formatting works: 

     

    result:

     

     

    This style of formatting doesnt:

     

     

    result (including the shrink & expand oddity ):

     

     

     

    The difference between to the two examples seems to be if Carriage Returns have been used or not.

     

  • Profile Image
    JotForm Support

    Answered by emrew86 on October 21, 2011 at 02:24 AM


    Hi arpajo, first of all, in google chrome there is a problem and we will solve it soon but this problem doesn't affect your form. You can use it.

    Second, if you want use picture next to text, please try put images into html editor.

  • Profile Image

    Answered by arpajo on October 21, 2011 at 03:17 AM

    Hey Fxr,

    I think you now understand exactly what happens to me. As you say, when "carriage returns" is not used, then the "shrink" or "expand" buttons do not work properly.

    Emrew86, thanks a lot for your workaround, but the question is no longer how to do it, but why the "shrink" and "expand" buttons don't work on Free HTML text when there are no carriage returns. So thanks a lot, really, but i'm trying to see why the "easy way" does not work.

    Thanks,

    Roberto

  • Profile Image

    Answered by arpajo on November 08, 2011 at 03:53 AM

    Any news on this topic? Thanks,


    Roberto

  • Profile Image
    JotForm Support

    Answered by fxr on November 08, 2011 at 05:49 AM

    Bug is still open. It is marked as important. Nothing else to report unfortunately.

    It will be resolved, but as workarounds have been provided & it isnt absolutely mission critical, it may may not be priotised as highly as other bugs, issues or features that the developers are working on.

  • Profile Image

    Answered by flyhighc on October 16, 2013 at 10:09 PM

    I've been trying to align an image to the right of the my Free Text box in my form and still receive the same Shrink/Expand scenario as outlined above.  I've tried the provided solutions involving the adjusting Form Fields size etc.  

    Can someone provide me with some CSS code to align an image to the right of my text box?

    Thank you!

  • Profile Image

    Answered by khrisell on October 16, 2013 at 10:52 PM

    Hello flyhighc,

    Kindly open a new thread for your inquiry,You can create your new thread using this link http://www.jotform.com/contact. so we can better track the issues, requests and solutions users are having. Also, to assist you better and avoid confusion.
    Thank you and looking forward to assist you.