How can I align these fields?

I need a way to align these fields. When I try and drag them around they end up all over the place. I try and drag to the left, and it goes to the top of the page, or another area, or it flickers and skips all over the place. 

The visual layout is nice, but trying to line up fields is madenning! I cannot make  it work. 

I want these things in two rows, which represent a single item to be ordered with the variables. 

As you can see they're jumbled all about, and every attempt to move them screws them up even worse. 

How can I make this work, so it's like this: 

----------------------------------------------------

Name           Finish          Float Frame

Qty          Size       cost ea         subttl

-----------------------------------------------------

https://www.jotform.com/build/81918246300150

If you can help me achieve this, I can duplicate those fields and create an order with multiple fields. But now it's completely foobar. 

I'm super frustrated. Every attempt to align fields or move them around and they all jump all over the place. I tried to do a simple thing, and now My form is completely FUBAR and I've spent a long time on all the conditional logic and calculations. 

How can I revert to the way it was yesterday? Trying to drag around a couple of fields has completely f*cked up my form altogether. The visual layout here leaves a lot to be desired. 

We would like to apologize for any inconvenience.

When positioning shrunk fields in your form, one of the rules that you need to follow is,

Shrunk fields that you want to appear first in a line of fields should have its "Move to a new line" property enabled.

Arrange the fields to your preferred order first: Name, Finish, Float Frame, Qty, Size, Cost, Cost each #. Then, Shrink the fields and follow the rule I have mentioned above. 

Reference Guide: Form-Field-Positioning

Nope, that doesn't work. I mean, it kind of does, but not really. Move it to a new line and try and move the boxes around and they all go jumbly and move all over the place, the mouse flickers, and things jump all over the screen. 

I put the form back the way it was using revision history, but really this is kind of a bust. I need a way to hold those in place, and move to a new line doesn't do it. 

Let me try again. I made a clone so I don't mess up my original. 

https://www.jotform.com/build/92867524415161

How do I unhide the hidden field (I know how to unhide it) and put it on line two, second from the end? 

Should I send a desktop video of me trying to move these? It looks like I'm playing tetris or something. 

I can see that you're already using custom CSS codes to your form to align these fields. Please try adjusting the margin-left properties of the said fields until the desired position is achieved.

I have cloned your form and will also make a few adjustments in the injected CSS. Let me have more time to test the form. I will get back to you on this thread with the correct codes.

Thank you! I’ll look at this tomorrow, and the css. I didn’t do the css. It was someone at jotform that helped me once. I didn’t even know there was custom css in that code.

thanks again. This is a big help.

You're welcome.

I'm still working on it. I will update you here as soon as I figured out the correct CSS codes to use.

Hi again,

As promised, here's the correct CSS codes to use to align those fields:

li#id_233,li#id_253,li#id_266,li#id_259,li#id_273{

    right: -140px;

    margin-top: -74px;

}

li#id_235,li#id_254,li#id_260,li#id_267,li#id_274 {

    left: -135px;

}

li#id_236,li#id_255,li#id_261,li#id_268,li#id_275 {

    right: -305px;

    margin-top: -74px;

}

li#id_181,li#id_256,li#id_262,li#id_269,li#id_276 {

    right: -445px;

    margin-top: -75px;

}

Please try removing the existing CSS codes injected in your form and replace it with the above codes I provided.

Here's a cloned form so you could see how it looks:

https://form.jotform.com/92874436801968

Let us know if you need further assistance on this.

I've tried and tried. I just cannot make it work. Again, every time I take one of those sections and try and duplicate it, the result is a jumbled mess. The duplicated section turns to a pile of jumbled garbage every time. I would be better off just making a form in wordpress where i have more control over the fields without them just jumping all over the place. The visual editor on jotform is breaking for me. The CSS just messed everything up. Perhaps I was only supposed to copy and past part of it or leave some of what was there? I'm not sure anymore. but what you see below is what keeps happening. See "size 5" on the second line, I CANNOT make it align left to be under the Name(Image 5). I cannot rearrange the fields without everything turning to a pile of jumbled fields sitting on top of each other. 

Please note that the custom CSS code applies only to the existing fields you have in the form. If you duplicate a field, it won't copy the assigned CSS code so you have to add another CSS code for that new field.

Please let us know how many sets of those fields you would like to create and we'll do it for you. 

You can also hire someone with a bit of knowledge in CSS to do it.

I'm trying to create 10 fields. There are five now. 

I do appreciate the help. I don't know why I was able to do this for the first five but now I can't.

Since the CSS codes provided by my colleague apply only to specific (existing) fields in your form, new fields that you will be adding to your form will not be covered by the codes.

I would suggest that you add the remaining set of fields (6 to 10) in your form and let us know once you do so we can help you with the CSS codes for those new fields.

I give up. Every attempt to make this work just turns into a jumbled mess.
Every time I try and copy and paste a section, it gets pasted as a jumbled
mess. If I were a coder I would just code this, but I'm not. Trying to
manually muck with all of this is just not working. The CCS didn't work
either, at least not for me.
https://www.jotform.com/build/92867524415161
It's just a mess every single time. I've wasted hours on this and can't
make it work.
Scott, Syd, Dinah, Latifah, Tomoko & JJ the dog
Bellevue Fine Art Reproduction: www.bellevuefineart.com
tel: 425-749-7396
*Like us on Facebook! *http://www.facebook.com/bellevuefineart
...

I examined your form and I understand that the next set of fields will show if a Name (Image #) field is filled. I will create the CSS codes that will solve the positioning issue of the fields in your form and I'll get back to you in this thread as soon as possible.

Sorry for any delays. Can you check this form, please?

https://form.jotform.com/92876391817977

In that form, I have removed the CSS codes that I think only causes the misalignment of the fields in your form.

I have also added the remaining set of fields (6 to 10) and applied the necessary conditions.

Using screenshots, can you tell us what else in that form do you need to change so we can apply what's needed, please?

We will wait for your response.

Considering your latest response in this thread is about another topic, I have moved it to a new thread to avoid confusion.

Here's the link to the new thread — https://www.jotform.com/answers/2002211

We will be responding to your new concern there shortly.

Thanks for all your help today. Yes, I was missing the "save" button. I thought it auto saved like other parts of jotform, and the save was hidden on my laptop, even in full screen view. 

I have removed all of the CSS, and simply removing it seems to have the desired effect mostly. I think I have it working now. I can deal with making it prettier another time. For now it seems to mostly look the way I want it to. 

https://www.bellevuefineart.com/a-test-page/

https://www.jotform.com/build/92867524415161

Thank you for updating us. We are glad to know that your form is now working to your expectations.

Should you have questions or concerns in the future, please do not hesitate to let us know and we will be glad to help you.