-
lumierex5Asked on April 23, 2019 at 12:14 PM
Hi all,
I will appreciate if you could help sort out the issues with a form I just created, I have listed the issues I have below:
1. Date field should be one line on web and the fields show be wider on mobile, I'm currently using the birthday picker widget and it shows the date field in 2 lines on web. The mobile view shows the 3 boxes on one line but I need each individual box to be wider.
2. I also need to increase the width of form fields on columns with 2 fields on mobile ( I need it to be wider than it is atm for mobile only)
3. Image on form not working when I open the link on the web
4. I don't know why my First Name field is justified to the right, help me look into this as well.
Thanks
P.S 1 &2 are very important
-
David JotForm Support ManagerReplied on April 23, 2019 at 2:12 PM
1) To position the 3 dropdowns of the Date Picker field in one line in desktop view, please inject this CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
#id_11 > #cid_11 > div > span:nth-of-type(2){
margin-right: 1.6%;
}
Result:
In regards to making them wider in mobile view, please inject this code:
@media only screen and (max-width: 480px) {
#id_11 > #cid_11 > div > span.form-sub-label-container{
width: 40% !important;
}
}
Result:
In regards to issues 2 and 3, I will work on then and get back to you as soon as possible.
-
lumierex5Replied on April 23, 2019 at 2:35 PM
I just tried what you suggested but nothing changed when I checked via web and mobile.
-
David JotForm Support ManagerReplied on April 23, 2019 at 2:41 PM
Solution for issue 1(update): I did not notice that there was another Date Picker field at the bottom, please include this code to make it wider in mobile view:
@media only screen and (max-width: 480px) {
#id_14 > #cid_14 > div > span.form-sub-label-container{
width: 30% !important;
}
}
Solution for issue 2:
Please inject the following code:
@media only screen and (max-width: 480px) {
.form-all{
width: 100% !important;
}
.form-line.form-line-column {
width: 186px !important;
}
}
Issue 3: could you illustrate with a screenshot the issue? https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum
Solution for issue 4:
You need to enable the "Move to new line" advance option for that "First Name" field:
See the result in my clone version: https://form.jotform.com/91125045930955
Let us know if you need more help.
-
lumierex5Replied on April 23, 2019 at 4:17 PM
-
David JotForm Support ManagerReplied on April 23, 2019 at 4:22 PM
Your new question will be addressed in the following thread: https://www.jotform.com/answers/1801458