topic Re: Date Field Dropdown Cut Off in Lead Capture Tools

Date Field Dropdown Cut Off

justserve — Tue, 02 Jun 2020 04:10:22 GMT

I'm running into a problem with a form I have embedded on a web page:

https://www.fairmontprepacademy.com/ece-ppc/

If you click on the Student 1 Birthdate field, the calendar appears but it gets cut off on the right side (desktop). I don't know what the problem is. Any thoughts?

Re: Date Field Dropdown Cut Off

sttang — Tue, 02 Jun 2020 06:10:33 GMT

Hi @justserve 👋🏻,

I've just taken a look at your page here and it seems like how the calendar shows up, is dependent on the screensize as it's responsive. If I were to view it on a bigger screen (desktop), the calendar appears alright. For example: Bigger screen

However, if I view the page on a smaller screen (laptop), the calendar gets cut off like you mentioned. In this case, as the form's style takes after the CSS stylesheet of the external page, you need to make certain changes to your code on this external page instead. Right now, your calendar dropdown has got a width of 240px, which is causing the calendar to cut off: Before

Solution

What you can do is to head over to this external page's CSS stylesheet to remove the fixed width of 240px for the calendar to show up nicely:

After

Alternatively, you can also overwrite it with a code such that the width is not a fixed width of 240px. An example of a code you can use to overwrite this can be:

.pika-lendar {
   width: fit-content !important
}

Hope this helps 🙂

Re: Date Field Dropdown Cut Off

justserve — Tue, 02 Jun 2020 17:47:39 GMT

Thanks a lot. I tried adding the fit-content CSS and it's not working. Any thoughts?

Re: Date Field Dropdown Cut Off

sttang — Wed, 03 Jun 2020 07:38:17 GMT

Hey @justserve,

No worries! However, as this is an external page, I have no visibility over your CSS stylesheet but from what I see using the inspect tool, the CSS has not been added somehow:

.pika-lendar {
   width: fit-content !important
}

As you can see, if I add the code in the segment below to target the calendar dropdown, it should help with the calendar's width on the page: CSS

I would recommend that you have your web designer/developer to help with this as they may be aware of anything else that could be interfering with the code. They should be able to help with this 🙂

Re: Date Field Dropdown Cut Off

justserve — Wed, 03 Jun 2020 16:14:07 GMT

I am the web designer 🙂 I've tried adding that code to the page and nothing changes.

Re: Date Field Dropdown Cut Off

justserve — Wed, 03 Jun 2020 19:58:41 GMT

Is there a way to edit the form CSS on Hubspot's end? I have tried editing the CSS on the Wordpress theme side and nothing works. I talked to the theme developer (Divi / Elegant Themes) and they said the CSS needs to be changed on Hubspot's end.