Appointment Slots Widget: Reducing size of the field

  • Profile Image
    SusanSolo
    Asked on August 31, 2017 at 06:15 PM

    hi,  I need help.  I'm trying not to use so much room on my form for a day event from 8-6 with 15 min slots

    ex

     

  • Profile Image
    Mike
    Answered on August 31, 2017 at 07:02 PM

    You may add the next CSS to the widget in order to make it more compact.

    .checklist label {
    line-height: 1em;
    }

    Let us know if you need any further assistance.

  • Profile Image
    SusanSolo
    Answered on August 31, 2017 at 07:24 PM

    still to long

     

  • Profile Image
    John_Benson
    Answered on August 31, 2017 at 09:46 PM

    Please check my clone form if that's the height you prefer. Here's my cloned form link: https://form.jotformpro.com/72428337747970

    It is still not finished but let us know if that the height to wanted and we will provide you a custom CSS code.

    We'll wait for your response. Thank you.

  • Profile Image
    SusanSolo
    Answered on September 01, 2017 at 07:35 AM

    I like that better.  thank you so much

  • Profile Image
    John_Benson
    Answered on September 01, 2017 at 09:31 AM

    Please add this custom CSS code to your form:

    .checklist label {

    padding: 0px

    }

    .checklist label.checkbox .before {

    top: 5px;

    left: 5px;

    }

    .checklist label.checkbox .before {

    top: 5px;

    left: 5px;

    }

    .checklist label.checkbox .after {

    top: -10px;

    left: -5px;

    }

    Here's a guide on how to add custom CSS code to the widget:

    1. Select the Widget field and click the Widget settings.
    2. In the custom CSS tab, paste the custom CSS code.
    3. Click the Update Widget button when you're done.

    Here's the clone link: https://form.jotformpro.com/72428337747970

    If you want to copy it, please follow this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL