How to add custom css for custom classname from widget settings?

Hello,

In the Appointment Slots widget, is it possible to add CSS that "hides" an appointment time when inventory for that item is 0, rather than just showing "None"?

Also, the widget is adding a scroll bar but also resizing so that all appointments are showing, rendering the scroll bar unneeded. Is it possible to set the size of the widget so that the scroll bar serves a purpose, or remove the scroll bar when the full list is showing?

Thank you,

Kat

Yes, we can hide options with a value of 0 in css. To do this, we need to create custom css from widget settings.

1- Please click on Widget Settings button.
2- Please click CUSTOM CSS tab.
4- Please add CSS code is shown below:

.checkbox.line-through.text-muted.checked, .checkbox.line-through.text-muted.checked + span {
  display: none !important;
}

5- Please click Update Widget button.

After doing this process, the scroll problem will disappear.

I created an example form: https://form.jotform.com/92023916269965

Feel free to contact us if you need further assistance.

Hello again Kat, 

I was also checking the form you have linked and have an alternative solution. 

You can try injecting this code into appointments widget:

label.text-muted, .none-left {display: none;}

Guide: How-to-Inject-CSS-Codes-to-Widgets

Also, to get rid of a scrollbar, I would suggest deleting empty options at the bottom:

We will be glad to assist if you need more help, just let us know. 

Victoria, your solution worked perfectly on both counts. I'd missed that I had extra fields and the CSS for hiding filled appointments did exactly that. Thank you!

Kat