How to Align the Fields Next to Each Other?

  • dcepticon
    Asked on September 30, 2015 at 4:11 AM

    Is there a way i can line up 4 fields next to each other?

  • mert JotForm UI Developer
    Replied on September 30, 2015 at 4:49 AM

    Hi,

    Yes, it is possible by injecting custom CSS to your form

     

    First, you need to learn your field's ID number:

    A) While related field selected with your mouse, click to gear shaped icon, then click to "Show Properties".

    How to Align the Fields Next to Each Other? Image 1 Screenshot 30

     

    B) On the upcoming popup window, find the "ID". It will show the specific ID for that field.

    How to Align the Fields Next to Each Other? Image 2 Screenshot 41

     

    Later, our second step is injecting custom CSS codes with the ID numbers:

    A) CSS code to change field's width is on the below. Blue marked area shows the IDs of those fields, you change it with desired field's ID and red marked area shows the width value you can adjust the value of it. You need to define this feature for every field. You can use comma for this. To illustrate: #id_1, #id_3, #id_4, #id_5 

     

    #id_1, #id_3, #id_4, #id_5 {

    width : 150px;

    }

     

    B) Finally, you can align those fields next to each other by using custom CSS. Use the following CSS.

     

    #id_1, #id_3, #id_4, #id_5{

    display:inline-block !important;

    }

     

    Also, I prepared a demo. You can see the four fields are aligned next to each other on it.

    http://form.jotformpro.com/form/52722231770954

     

    I hope this steps will help you. If you stuck somewhere in the process or need more information, please don't hesitate to contact us.

    Thanks.