-
AMM123Asked on August 15, 2017 at 4:36 AM
https://form.jotformeu.com/72166347384361
I am trying to learn how to change the position of my fields using CSS
In build mode the Date picker is where I want it.
But in preview form mode it moves
any ideas?
-
CharlieReplied on August 15, 2017 at 5:39 AM
I'm not really sure if the fields and the custom CSS you have would be practical. First, the 2nd column you have are actually different fields and the labels are just hidden. In a design view, this would pose problems if you want to manage their data properly. I suggest you still add labels on the 2nd column fields because your CSS code is already hiding the labels for the 2nd column.
Also, make sure that the first field in your row has the "Move to a new line" option enabled:
To learn more about positioning fields, you can check this guide: https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm.
Another disadvantage of the custom CSS code you have is that it will not make your form fields mobile responsive, here's how it looks like in a smaller display:
Note that the width of the form, the fields and overall layout changes depending on the device or screen display. Because you have hard coded the position, sizes, margin and others, the layout and fields will adjust unexpectedly.
Have you tried considering the following widgets which would allow you to add multiple entries on a table or row like manner:
https://widgets.jotform.com/widget/add_options
https://widgets.jotform.com/widget/matrix_dynamique
https://widgets.jotform.com/widget/dynamic_textbox
https://widgets.jotform.com/widget/field_multiplier
https://widgets.jotform.com/widget/configurable_list => This one is the most advanced widget that we have. You can check this guide: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget.
You can also use the "Input Table" field:
The fields and widgets I mentioned would allows your user to add multiple entries, if you are targeting multiple "applicants" on one submission.
If you still want to use the default fields you have, then I can try coming up with a customized CSS code to improve the layout.