Reorder elements on jotform to display them horizontally instead of vertically

Hi all, I'm new to Jotform  and have been trying to place next to each other rather than vertically the layout I'm trying to do is like this. So use them as my heading then enter my sums underneath to give me my totals

Blocks     bricks     mortar sand  cement

   4            7            7         7      8   

 

If anybody can help much appreciated. Thank you. Carl  

 

Hi Carl,

There are many different ways to align the values like that, but I am not sure exactly what you would like to do.

Based on what I understood I have created this jotform for you to check. If it is what you were looking for you can clone it and based on that do the calculations, if it is not, do let me know more and we can see what can be done.

http://form.jotformpro.com/form/42636545712961

If you would like to clone the form you can see how to do that here: How to Clone an Existing Form from a URL

Now, I know few things about mixing up some concrete, but I think that it would be best to leave the calculations to you ;)

If you however need any help setting them up, do let me know also, if this is what you wanted to achieve do let me know and I can guide you through what I did to make them like that so that you can do the same later on as well :)

Best Regards,
Ben

Hi Ben, thanks to get back to us.

I am quite confident of being able to do my sums, it is laying out the boxes next to each other as you have in the link you have sent. I cannot find how to put them side by side can you show me a method of doing this, please.

Best regards,
Carl

...

Hi Carl,

If you want to create such jotform, I would suggest cloning the one I gave link above: http://form.jotformpro.com/form/42636545712961

Now if you would like to alter some other jotform to be similar to that, it would be best to give us the link to it.

Now the step by step what I did to get it looking like that:

I have first added the text box widgets to the form by adding one and setting its width, then duplicating it.

Now to shrink it

Now duplicate the widget

Now we get something that looks like this:

A thing to note here is their position because if we want to make them all in one row, but have all the other widgets as they were, we will need this.

If you take another look at the jotform you can see how to count it:

OK, so now we see that the fields we are interested in are under numbers 2, 3, 4, 5 and 6 so lets see how we can use this :)

.form-line:nth-child(2), .form-line:nth-child(3), .form-line:nth-child(4), .form-line:nth-child(5), .form-line:nth-child(6)
{
    display:inline-block;
    margin-left: 2px;
    width:100px;
}

That is the CSS code that we will use to make them fall in line. Now notice the
:nth-child(2),
:nth-child(3),
:nth-child(4),
:nth-child(5) and
:nth-child(6)

As you can see we placed those numbers in the brackets telling the CSS engine which widgets we are interested in. So if your jotform has different fields, it is easy to update the CSS above to handle those specific cases.

Now to use those CSS commands you should take a look at this simple tutorial here Inject Custom CSS Codes

What next? Well your jotform should now look like this:

If it does, congrats, you did it.

If not, do let us know and we will take a look what might need to be changed.

Do let me know if this helps you and if you need help with specific jotform, do give us a link and we will take a look at it.

Best Regards,
Ben

Ben
Thank you so very much.

...

Hi Carl,

You are welcome, I am glad if you were able to use that in your jotforms.

If you have any other questions in the future, feel free to contact us :)

Best Regards,
Ben