Date Field Dropdown Cut Off

SOLVE
Highlighted
New Contributor

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?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
HubSpot Employee

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: CSSCSS

 

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 🙂

View solution in original post

5 Replies 5
HubSpot Employee

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 screenBigger 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: BeforeBefore

 

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:

AfterAfter

 

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 🙂

Highlighted
New Contributor

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

Reply
0 Upvotes
Highlighted
Solution
HubSpot Employee

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: CSSCSS

 

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 🙂

View solution in original post

Highlighted
New Contributor

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

Reply
0 Upvotes
Highlighted
New Contributor

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.

Reply
0 Upvotes