How to Align the Fields Next to Each Other?

  • Profile Image
    Asked on September 30, 2015 at 04:11 AM

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

  • Profile Image
    Answered on September 30, 2015 at 04:49 AM


    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".


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


    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.


    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.