I can't move an element onto a row.

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

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.

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?

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. 

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

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.