Need help customizing my form fields style

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)

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.

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?

Also-

Could you help me with the CSS code to hide the little clock icon, and the < right + left > arrow indicators?

Thanks!

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.

Awesome, thank you.

Could you also help me with the CSS to move these collapsible fields closer together (less white space between them)?

And also make the drop down arrows on the collapsible sections look like this?

Also, part of this is getting cut off on the screen on mobile (iPhone 14 pro max)

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?

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.

Great! For some reason, the section collapse worked perfectly on mobile

However, on desktop, it appears unchanged

Can anyone help? Thanks!

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;

}

I just looked at my form today. For some reason, suddenly, without making any edits ... the section collapse buttons are not longer showing

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.