Weekly Appointment Planner: adjusting the width and removing the available using custom css code

Hi there

I'm trying to do two things with this widget:

1. Change the layout so that people can see the entire date/time easily (ex. by widening the form--I have tried this: https://www.jotform.com/answers/4029647-weekly-appointment-planner-widget-extending-width and this: https://www.jotform.com/answers/12534081-weekly-appointment-planner-how-to-increase-width and neither worked. So even just finding a way to make it clear there's a date, a time, and then virtual/in person
2. Remove the "Unlimited" or "8 available" writing, OR, ideally change that column to be the location (either virtual, or an address like "Mississauga"). I tried just deleting the curly brackets {8} but nothing happened

Thanks

Laura

Hi Laura,

Thanks for reaching out to Jotform Support. I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Thanks for your patience and understanding.

Ok thanks. I'll look forward to your reply

Laura

Hi Laura,

Thanks for patiently waiting. Here's the Custom CSS code that you can add to the Weekly Appointment Planner Widget. 

.items-left{display:none;}



.checklist label {

width: 190px !important;

}

.checklist label.checkbox .before {

top: 10px;

left: 10px;

}

.checklist label.checkbox .before {

top: 10px;

left: 10px;

}

.checklist label.checkbox .after {

top: -5px;

left: -5px;

}

Let me show you how to add Custom CSS Code to a widget:

1. In Form Builder, select the Weekly Appointment Planner field.
2. And, click the Wand icon, and under the Widget Settings select the Custom CSS tab.
3. Paste your CSS Code to the Custom CSS Code box and click Update Widget.

Check out the screencast of the result below:

Give it a try and let us know how it goes.

Thanks Joeni! That worked to remove the column with the green text ("10 available" or "UNLIMITED") but it didn't change the width of the widget so things weren't squished in.

If the width can't be changed, is there I way I can change the spacing of the font so that it differentiates: date, time, location option as three separate lines within the option, ideally with a small space singling out the location option? If that doesn't work, is there a way to bold the location option and change the colour?

See attached examples

ThanksLaura

Again--the most ideal is to just change the width of the widget but as I noted I have tried a few options (see original post) and none of them worked.
Thanks
Laura

Hi Laura,

Thanks for getting back to us. Yes, it is possible to make the Weekly Appointment Planner widget full-width. Thanks for reaching out to Jotform Support. This can be done by adding custom CSS to your form. Check out the steps below to see how it's done:

• Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
• Under the Styles tab, paste the code below into the Inject Custom CSS area.

/*To make the Weekly Appointment Planner full width - 14186031*/

label#label_22 {

    width: 100%;

}



div#cid_22 {

    width: 100% !important;

}



iframe#customFieldFrame_22 {

    width: 100% !important;

}

The next step would be adding CSS code to the widget, Check out the steps and screenshot below to see how to add the custom CSS to your widget:

• Click on the Wand icon to open Widget Settings.
• Open the Custom CSS tab and add the below code.

/*To make the Weekly Appointment Planner full width - 14186031*/

.checklist label.checkbox {

    padding-right: 2px !important;

}



.checklist label {

    width: 400px !important;

}

• Click on the Update button to save the changes.

Here's what the result will look like:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes. 

thanks for the reply

something seems to have gone wrong on my end and it doesn't look like yours. Even yours cloned form doesn't have the writing going all the way across the screen, it's like there's an invisible column there (see where Mississauga is listed on a second line in one of the rows for example?)

Here's a picture of what mine looks like when I injected the code:

Hi Laura,

Thanks for getting back to us. I just tested the code my colleague shared on a clone version and it appears to work as expected. Check this out:

Could you try removing the code and add them again and see how it goes? I've cleared your form cache as a precaution. If the the width is still not working, would it be okay if we do it from our end?

Once we hear back from you, we'll be able to help you with this.

I still can't make it work.

Does it have to do with having the previous custom code already input in order to remove the green column (see above thread)

I just tried playing around with other settings like the width etc. and still it's not working. Can we live chat and walk through it somehow?

Laura

here's what it looks like: I tinkered and changed the labels to be at the top, but you can see the text is still restricted and not moving across the page

Hi Laura,

Thanks for getting back to us. I cloned your form and tested it to see if I could replicate the issue, and I ran into the same problem. When I looked at your form, I saw that there was a line of CSS code that was creating an issue. Let me show you how to fix it: 

• Click on the Wand icon to open Widget Settings.
• Open the Custom CSS tab, search for the below code, and remove it:

.checklist label {

width: 190px !important;

}

• Click on the Update button to save the changes.

Here's what the result will look like:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes.