Date Field Dropdown Cut Off

[justserve]

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?

[sttang]

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 🙂

[justserve]

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

[sttang · Accepted solution]

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 🙂

[justserve]

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.

[justserve]

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