-
J_B_DAsked on June 6, 2023 at 9:59 PM
Re form: New order form
Could someone help me with the CSS to hide the calendar part of the appointment date picker?
It currently looks like this:
I would like it to look like this: (photoshop mockup)
-
Girish JotForm SupportReplied on June 7, 2023 at 3:32 AM
Hi Vaughyn,
Thanks for contacting Jotform support. Please add this CSS code to the form:
.appointmentCalendarContainer {
display: none;
}
.appointmentDates {
margin-left: -310px!important;
}
RESULT:
Give it a try and let us know if that helps.
-
J_B_DReplied on June 7, 2023 at 4:07 AM
The first part of the code worked great for hiding the calendar.
But, on mobile (iPhone 14 pro max) it looks like the margin left -310px pushes the time slots off of the screen to the left (it gets cut off so you can’t see it properly).
Is there a better way to make this work?
-
J_B_DReplied on June 7, 2023 at 4:10 AM
Also-
Could you help me with the CSS code to hide the little clock icon, and the < right + left > arrow indicators?
Thanks!
-
Girish JotForm SupportReplied on June 7, 2023 at 4:39 AM
Hi Vaughyn,
Please use this CSS code to view the time slot correctly on iPhone;
@media only screen and (max-device-width: 480px) {
.appointmentDates {
margin-left: -310px!important;
}
}
You can adjust the px value accordingly.
To hide the other icons, use this code:
.appointmentDayPicker.dayPicker, .jDropdownWG {
display: none;
}
Give it a try and let us know if that helps.
-
J_B_DReplied on June 7, 2023 at 11:50 AM
Awesome, thank you.
Could you also help me with the CSS to move these collapsible fields closer together (less white space between them)?
-
J_B_DReplied on June 7, 2023 at 12:09 PM
And also make the drop down arrows on the collapsible sections look like this?
-
J_B_DReplied on June 7, 2023 at 12:58 PM
Also, part of this is getting cut off on the screen on mobile (iPhone 14 pro max)
-
J_B_DReplied on June 7, 2023 at 1:08 PM
Regarding this:
I had to set the pixels to 0 for it to display properly on my iPhone.
Will this code work to display the calendar properly on other types of phones (in different sizes), or is there a way to make this responsive to different devices?
-
Elton Support Team LeadReplied on June 8, 2023 at 3:35 AM
Hi Vaughyn,
Thanks for getting back to us. You can append these CSS codes to achieve all the changes you mentioned for mobile.
@media screen and (max-width: 480px) {
/* make section collapse closer */
.form-section-closed {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
max-height: 70px;
}
.form-section {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* fix overlapping element on appointment field */
li[data-type=control_datetime] [data-wrapper-react=true] {
width: 84% !important;
}
}
/* customize section collapse arrow */
.form-collapse-table:after {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjkwcHgiIGhlaWdodD0iOTBweCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxnPjxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuOTczIiBmaWxsPSIjZmVmZWZlIiBkPSJNIDM0LjUsMS41IEMgNjAuOTg0OCwtMS41MTk3NSA3OC40ODQ4LDkuNDgwMjUgODcsMzQuNUMgOTAuNTA2OCw2MS4wMDI3IDc5LjY3MzQsNzguNTAyNyA1NC41LDg3QyAyNy45OTczLDkwLjUwNjggMTAuNDk3Myw3OS42NzM0IDIsNTQuNUMgLTEuMzg0NTUsMjcuOTEgOS40NDg3OSwxMC4yNDMzIDM0LjUsMS41IFoiLz48L2c+CjxnPjxwYXRoIHN0eWxlPSJvcGFjaXR5OjEiIGZpbGw9IiM0NDQ2NDkiIGQ9Ik0gMjEuNSwzMS41IEMgMjIuODczNCwzMS4zNDMzIDI0LjIwNjgsMzEuNTEgMjUuNSwzMkMgMzEuNjgxMSwzOC4zNDgxIDM4LjAxNDUsNDQuNTE0OCA0NC41LDUwLjVDIDUwLjY1MjEsNDQuODQ4MiA1Ni42NTIxLDM5LjAxNDkgNjIuNSwzM0MgNjUuNTQwOSwzMC41ODQ3IDY3LjU0MDksMzEuMjUxNCA2OC41LDM1QyA2MS4yOTkyLDQzLjcwMTMgNTMuMjk5Miw1MS41MzQ2IDQ0LjUsNTguNUMgMzYuMjQyMyw1MS43NDYzIDI4LjQwODksNDQuNDEzIDIxLDM2LjVDIDIwLjM2MDMsMzQuNzM1IDIwLjUyNjksMzMuMDY4MyAyMS41LDMxLjUgWiIvPjwvZz4KPC9zdmc+Cg==) !important;
}
The result will look like this:
In addition, I don't see any other issue with the responsive layout of the appointment field. Setting the margin to zero was the correct approach to keep the element mobile responsive. If you have any additional style requests, kindly create separate threads for each request to prevent confusion. Thanks for your cooperation.
-
J_B_DReplied on June 10, 2023 at 5:06 PM
Great! For some reason, the section collapse worked perfectly on mobile
However, on desktop, it appears unchanged
Can anyone help? Thanks!
-
Elton Support Team LeadReplied on June 10, 2023 at 9:20 PM
Hi Vaughyn,
The CSS code was intended for mobile only. If you want it the same for desktop, replace the CSS code with the following:
/* make section collapse closer */
.form-section-closed {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
max-height: 70px;
}
.form-section {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* fix overlapping element on appointment field */
li[data-type=control_datetime] [data-wrapper-react=true] {
width: 84% !important;
}
/* customize section collapse arrow */
.form-collapse-table:after {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjkwcHgiIGhlaWdodD0iOTBweCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxnPjxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuOTczIiBmaWxsPSIjZmVmZWZlIiBkPSJNIDM0LjUsMS41IEMgNjAuOTg0OCwtMS41MTk3NSA3OC40ODQ4LDkuNDgwMjUgODcsMzQuNUMgOTAuNTA2OCw2MS4wMDI3IDc5LjY3MzQsNzguNTAyNyA1NC41LDg3QyAyNy45OTczLDkwLjUwNjggMTAuNDk3Myw3OS42NzM0IDIsNTQuNUMgLTEuMzg0NTUsMjcuOTEgOS40NDg3OSwxMC4yNDMzIDM0LjUsMS41IFoiLz48L2c+CjxnPjxwYXRoIHN0eWxlPSJvcGFjaXR5OjEiIGZpbGw9IiM0NDQ2NDkiIGQ9Ik0gMjEuNSwzMS41IEMgMjIuODczNCwzMS4zNDMzIDI0LjIwNjgsMzEuNTEgMjUuNSwzMkMgMzEuNjgxMSwzOC4zNDgxIDM4LjAxNDUsNDQuNTE0OCA0NC41LDUwLjVDIDUwLjY1MjEsNDQuODQ4MiA1Ni42NTIxLDM5LjAxNDkgNjIuNSwzM0MgNjUuNTQwOSwzMC41ODQ3IDY3LjU0MDksMzEuMjUxNCA2OC41LDM1QyA2MS4yOTkyLDQzLjcwMTMgNTMuMjk5Miw1MS41MzQ2IDQ0LjUsNTguNUMgMzYuMjQyMyw1MS43NDYzIDI4LjQwODksNDQuNDEzIDIxLDM2LjVDIDIwLjM2MDMsMzQuNzM1IDIwLjUyNjksMzMuMDY4MyAyMS41LDMxLjUgWiIvPjwvZz4KPC9zdmc+Cg==) !important;
}
-
J_B_DReplied on June 28, 2023 at 5:41 PM
I just looked at my form today. For some reason, suddenly, without making any edits ... the section collapse buttons are not longer showing
-
Richie JotForm SupportReplied on June 29, 2023 at 4:14 AM
Hi Vaughyn,
You can replace the old CSS code in line 171 with this code to change the section collapse button.
.form-collapse-table:after {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjkwcHgiIGhlaWdodD0iOTBweCIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247IHRleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgaW1hZ2UtcmVuZGVyaW5nOm9wdGltaXplUXVhbGl0eTsgZmlsbC1ydWxlOmV2ZW5vZGQ7IGNsaXAtcnVsZTpldmVub2RkIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxnPjxwYXRoIHN0eWxlPSJvcGFjaXR5OjAuOTczIiBmaWxsPSIjZmVmZWZlIiBkPSJNIDM0LjUsMS41IEMgNjAuOTg0OCwtMS41MTk3NSA3OC40ODQ4LDkuNDgwMjUgODcsMzQuNUMgOTAuNTA2OCw2MS4wMDI3IDc5LjY3MzQsNzguNTAyNyA1NC41LDg3QyAyNy45OTczLDkwLjUwNjggMTAuNDk3Myw3OS42NzM0IDIsNTQuNUMgLTEuMzg0NTUsMjcuOTEgOS40NDg3OSwxMC4yNDMzIDM0LjUsMS41IFoiLz48L2c+CjxnPjxwYXRoIHN0eWxlPSJvcGFjaXR5OjEiIGZpbGw9IiM0NDQ2NDkiIGQ9Ik0gMjEuNSwzMS41IEMgMjIuODczNCwzMS4zNDMzIDI0LjIwNjgsMzEuNTEgMjUuNSwzMkMgMzEuNjgxMSwzOC4zNDgxIDM4LjAxNDUsNDQuNTE0OCA0NC41LDUwLjVDIDUwLjY1MjEsNDQuODQ4MiA1Ni42NTIxLDM5LjAxNDkgNjIuNSwzM0MgNjUuNTQwOSwzMC41ODQ3IDY3LjU0MDksMzEuMjUxNCA2OC41LDM1QyA2MS4yOTkyLDQzLjcwMTMgNTMuMjk5Miw1MS41MzQ2IDQ0LjUsNTguNUMgMzYuMjQyMyw1MS43NDYzIDI4LjQwODksNDQuNDEzIDIxLDM2LjVDIDIwLjM2MDMsMzQuNzM1IDIwLjUyNjksMzMuMDY4MyAyMS41LDMxLjUgWiIvPjwvZz4KPC9zdmc+Cg==) !important;
}
Checkout the screencast below to see the steps:
You can check this screenshot for the result:
Give it a try and let us know how it goes.