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.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    I can't move an element onto a row.

    Asked by Strole on April 26, 2017 at 09:03 AM

    Hi

    I want the 2nd row to look like the first row as picture next to text & dropdown menu but I can't move the drop down menu onto the 2nd row. I have shrank it but it just moves to another line but not one above & other element moves down.

    Any help be appreciated 

    Stu

    Page URL:
    https://eu.jotform.com/build/71101952077350

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Mike_G on April 26, 2017 at 10:48 AM

    If you would like to have the image and drop-down of the second row be next to each other only on mobile devices, then you can add the following CSS codes below to your form.

    @media (max-width: 480px) {

        li#id_13 {

            clear: both !important;

            width: 100px !important;

        }

    }  

    However, you want it also to appear like that even on desktop, then you can just use the CSS codes below instead.

    li#id_13 {

        clear: both !important;

        width: 100px !important;

    }

    I hope this helps. If you have any other questions or concerns, please feel free to contact us again anytime.

     

    Thank you.

  • Profile Image

    Answered by Strole on April 26, 2017 at 06:16 PM

    Hi

    I'm just not able to drag an element next to another. I have told the layout it has two columns & have shrank the element but I cannot move the drop down next to the pic. I can't understand why something that should be easy to do is so hard?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on April 26, 2017 at 07:20 PM

    I have checked your form and I can see there is some CSS code applied to the fields that may affect the fields you're referring to. 

    I have commented some lines of the CSS code , the code between "/* --- */", ended up with this one: 

     

    /*

    .form-line.form-line-column.form-col-1 {

        width : 100px;

    }

     

    */

     

     

    /*

    .form-image {

        width : 50px;

        height : 50px;

        text-align : left;

    }

    */

     

    .form-label.form-label-top {

     

    }

     

    .form-section.page-section {

     

    }

     

     

    /*

    .form-line.form-line-column.form-col-2 {

        width : 180px;

    }

     

    */

     

    .form-dropdown {

        width : 80px;

    }

     

    #input_12 {

        width : 50px;

    }

     

    .form-header-group {

     

    }

     

    .form-header {

        font-family : tahoma;

        font-weight : bolder;

    }

     

    #header_1 {

     

    }

     

     

    /*

    .form-line.form-line-column.form-col-1 {

        width : 100px;

    }

     

    */

     

    #id_5 {

     

    }

     

    #label_14 {

     

    }

     

    #71101952077350 ul.form-section {

        height : 3500px;

    }

     

    .form-input-wide.jf-required {

     

    }

     

    #input_12 {

        width : 50px;

    }

     

    .form-all {

        height : 3500px;

    }

     

    #cid_10 img.form-image {

     

    }

     

    #cid_13 div.hoverSticky {

     

    }

     

    #cid_13 div.hover {

     

    }

     

    #label_3 {

        width : 250px;

    }

     

    /*

    li#id_13 {

        clear : both !important;

        width : 100px !important;

    }

     

    */

     

    .form-input-wide {

        width : 90px;

    }

     

    #71101952077350 div.form-all {

     

    }

     

    #cid_22 {

        width : 100px;

    }

     

    .form-line {

     

    }

     

    #id_22 {

        width : 70px;

    }

     

    #cid_22 img.form-image {

     

    }

     

    #id_23 {

        width : 160px;

    }

     

    #cid_17 {

     

    }

     

    #input_23 {

     

    }

     

    Then I have moved the second image to a new line and it worked on my end: 

    Here's an example about how it would work: https://form.jotformpro.com/71157543580962 

    Could you please let us know if this is how you're trying to get your form displayed? 

    We will wait for your response. 

  • Profile Image

    Answered by Strole on April 27, 2017 at 02:54 AM

    Hi Thx for your response.

    The problem is I need to do the same as above for Game 2 Game 3 etc. for 22 Games...

    Game 1

    Pic Dropdown

    Pic Dropdown

    I start a new header

    Game 2

    I then click an image element but as soon as I add a dropdown element I cannot move it alongside the image. It just won't sit alongside it. I have shrank it, I have enabled columns. What am I doing wrong?

     

    https://eu.jotform.com/build/71101952077350

  • Profile Image
    JotForm Support

    Answered by Charlie on April 27, 2017 at 04:03 AM

    You need to both shrink the drop down field and the image. It depends on what comes first, is it the image or the drop down field? In your "Game 1", the image is the first in line, while in "Game 2", the drop down field comes first before the image. 

    You seem to be using incorrect options.

    "Move to a new line" => This means the field will be placed on a new line. 

    "Shrink" => This means the field will adjust its width and position itself to a field on its left side, assuming that the left side field is ALSO shrink.

    Here's a screencast to show you on how I did mine without using CSS codes:  

     

    Basically, what you need to do:

    1. The first field in the line should have the "Move field to a new line" enabled. You are telling the form builder that this field should start on a new line.

    2. All the fields you want to have in one line or row should have the "Shrink" enabled. 

     

    You can also check this guide to learn more about positioning fields: https://www.jotform.com/help/328-How-to-position-fields-in-JotForm. Although it displays the older form builder, the options are still the same. 

    I hope that helps.