How to Make Field's Width Smaller and Align Them Next to Each Other?

  • alltronicsbeveiliging
    Asked on September 29, 2015 at 3:25 AM

    Hi Jotform,

    How do i hide the message "This field is hidden and will never be seen on the form"

    Is there an CSS code for this i can use?

    Beacause of this message i cannot put many (hidden) fields next to eachother. The message makes the field very wide.

    Michiel

  • mert JotForm UI Developer
    Replied on September 29, 2015 at 4:44 AM

    Hi Michiel,

    Unfortunately, there is no way to hide that message. It is designed to warn the users which field is hidden in their forms.

    On the other hand, if you want to make the fields smaller and align them next to each other, you can use the following method:

     

    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 Make Fields Width Smaller and Align Them 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 Make Fields Width Smaller and Align Them 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 ID of that field, you change it with desired field's ID and red marked area shows the width value you can change the value of it. You need to define this feature for every field. You can use comma for this. To illustrate: #id_160, #id_130

     

    #id_130 {

    width : 222px;

    }

     

    B) Also, you can align those fields next to each other by using custom CSS. Use the following CSS; but remember, if you define all of your fields for one row, it is not going to fit. You need to define max. 2 or 3 field in a row. So, you need to repeat following CSS code for every 2 or 3 field. 

     

    #id_130, #id_160 {

    display:inline-block !important;

    }

     

    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.