How to display the fields on the form in mulitple columns?

I am trying to to figure out using CSS to make columns in a mobile view of the form. If you take a look at the form is there a way to make the appointment widgets 4 across instead of them all 1 row going down and the same thing for the select row radio buttons? It works how i would like on desktop view but not mobile. 

To select the appointment widgets to show select row 1 or 2

http://form.jotform.com/82207519865161

Thanks!

I have checked your JotForm and see that the widgets are already set to displayed in 5 columns. Were you able to fix it? Please be noted that the forms are mobile responsive by default. If the mobile view is displaying one field in a column, it could be due to the width of the field. You may try positioning the fields as shown in the guide below:

https://www.jotform.com/help/90-Form-Field-Positioning

Also, please refer to the guide Setting-up-Form-Columns to display the fields in columns.

Please get back to us if you need any further assistance. We will be happy to help. 

Hello, well i shrunk all the widgets and adjusted them. I added the mobile responsiveness widget to the form and it still does not help. All my appointment widgets are still in one column. Any more help on getting the appointment widgets 4 or 5 across would be appreciated.

Thanks

I am checking to see what CSS would need to be applied to get multiples on a single row on mobile.  So far it seems the overall width of the widgets is forcing them to a new line no matter what I add.  I will update you as soon as I have found a fix.

It seems the mobile responsive widget is actually preventing the widgets from being on a single line.  If you remove the mobile responsive widget, it should allow for multiple widget on the same line on mobile, though it might require a bit more customization to get them to look right since they are a fair bit squashed on mobile.

Hello, i removed the mobile responsive widget from the form and i am still getting only one column for the widgets. I tested in both Safari and Chrome. 

If it’s not possible that’s ok, or if it’s at least possible to get 2 per row

How about using a single appointment slots widget separated into multiple columns.  It works much better on mobile.  Set up all 20 seats in one widget, all with an available quantity or 1.  Then add the following code to the widget's CSS section:

.list-item {

border: 1px solid #ccc !important;

}

.checklist {

  border: none;

-webkit-box-shadow: none;

box-shadow: none;

}

.items-left {

    display: none;
}

#checklist li{

float:left;

height: 60px;

border-right: 1px solid lightgray;

width: 24% !important;

}

You can see an example of how it would look in the following form:

https://form.jotform.com/82316362788970

You can clone it to your account if you want to see the setup:

https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

That's how I originally set it up in the past.  But I was having issues assigning a price to each selection in the widget.  Each ticket that the user selects is $10.  So as users select seats I want $10 to get added to the total.  The only way to achieve this, which is was told by Jotform support was to setup an individual widget for each seat.  When that widget was selected have it update the total to a text box (each seat has it's own hidden text to update when selected) and then add up the total from all the text boxes.  Hope that makes sense.  That is how my form is setup currently.  If you know of a better and easier way to achieve this, please share. Thanks

The way you have it currently set up is the right way except the mobile responsiveness is not making it 4 slots in a row. I tried a few CSS codes to make it that way to no avail. I'll research more and get back to you soon.

Just checking to see if you were able to come up with anything? Thanks for the help

I apologize fo the delay on this. Unfortunately, we are not able to control the widget styling to such a microlevel. This widget is designed to occupy the whole width on media devices and I could not find a way to line 4 of them in a single row. I have tried several options in last couple of days however I haven't had any success.

I'll escalate this issue to our Level-2 team to see if they can offer any workaround. We'll keep you posted with further updates here.

Sounds good, thanks so much for your help

I am running in to a similar issue on my end when testing.  I can get multiple to appear on a single line on mobile:

But when that is done, the rest of the styling is really off.  I could do 2 on one line with the correct styling but that also required having 2 per line on desktop as well.

If you can get 2 per row that's a whole lot better than 1 long row.  If you make 4 per row that would be ideal. I don't want you'll to stress over it. Thanks for all the assistance

I am still doing some test but even when I reduce the spacing enough to fit 2 on mobile, it is still pushing 1 per line.  I will keep testing with it to see if there is something else I can figure, but for now it does seem like the widget wants to push to one per line on mobile.  It seems my previous fix isn't applying the way I thought.

Ok, well thanks so much for all the assistance!

I think I have an alternate solution that might work.  Still setting up an example.  It would require a fair bit of redoing of the form but would be much better looking on mobile.  I will update you as soon as the example is finished.

So my thought was to use only two widgets for each set of seats, one for 1-9 and one for 10-20.  That way I can use a condition to output the selections made in the widgets to a number field:

So for seat 1-9, if they select seat 1, the output would be 1.  If they select seat 1 and 2, the output would be 12, if they select 1, 2 and 3, the output would be 123.  This then allows me to create conditions to see how many seats were selected in the widget.  If the output is less than 10, only 1 seat was selected.  If the output was greater than 9 but less than 100, 2 seats were selected.  if the output was greater than 99 but less than 1,000, 3 seats were selected and so on.

I then updated another field with the number of seats selected for that widget.  The reason I split them into 2 widgets is for seats 10-20, the output number adds 2 digits each time a seat is selected instead of 1 digit, since the seat number have 2 digits.  If seat 10 and 20 are selected, the output is 1020.  If 10, 11 and 12 are selected, the output would be 101112.  So I set up different ranges to get the number of seats from those:

That way you can have the number of seats selected from each widget to use in your calculations. 

This setup not only reduces the number of widgets in the form but also is properly formatted on mobile.  Take a look to see if it suits your needs:

https://form.jotform.com/82316362788970

You can clone it to your own account to see how I set it up:

https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

That is amazing! That is what I am looking for with a lot less widgets.  Thank you, I have been working with Jotform support for months on and off trying to find a way to make what I wanted to do work.  I added a form calculation widget and that that is working. Every time a user selects a tickets it adds $10 to the total.  The only thing I have left would be to output the seat numbers that a users selects.  The output box that you setup does this but is there a way to separate each number with a comma?

Link to updated form https://www.jotform.com/build/82336089165159

Unfortunately, there's no easy way to separate them with a comma. I'll try to fiddle around with conditions if there's a possible workaround for that. I'll let you know here if I found one.

I sorta figured it out.  I just added a comma to all the items in the appointment widget.  Now when selected they are separated by commas.  If there is a better looking way of doing this I am all for it.

Great. It seems to be working great except for the last option is also displaying the comma. If we have any news for you in this regard, we'll post it here.

Thanks!