Fill in the Blank, Date picker: Calendar pop-up gets cut off if it is too close to its container edge/viewport.

Oh, and the FITB date picker gets cut off if it is too close to its container edge/viewport.

We would like to apologize for any inconvenience. I can only assume that your form is embedded on a website and that the issue you have described is happening when the calendar pop-up of the Date field in the Fill in the Blank field of your form is opened on your website.

Perhaps, we can adjust the position of the calendar pop-up using custom CSS codes that can be injected into the form. May we ask that you share with us the link to your website so we can help you with the appropriate custom CSS codes needed for your concern.

We will wait for your response.

It doesn't have to be embedded on a website. You can reproduce the issue simply by resizing your browser window for https://form.jotform.com/210206605628045.

I'm not sure how I prefer to address it, since I like how it automatically left aligns with the field. I suppose I would like calendar.popup to be smart enough to know if it doesn't have enough room, and that point maybe change from absolutely positioned left: whatever to right: 0.

Greetings,

Kindly inject the CSS code below into your form.

.calendar.popup {

    left: 280px !important;

}

@media screen and (max-width: 612px) {

 .calendar.popup {

    left: 40px !important;

}

}

@media screen and (max-width: 480px) {

 .calendar.popup {

    min-width: 70% !important;

}

}

Related guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

Should you need further assistance then please let us know.

Thanks

Thanks. Yeah, if it can't be aware of the edges, I will probably position it centered to the container until desktop, then centered to the field (not sure why I need the 30px, but whatevs).

.calendar.popup {

    margin-left: 0;

    transform: translateX(-50%);

}

@media (max-width: 939.98px) {

    .calendar.popup {

        left: 50% !important;

    }

}

@media (min-width: 940px) {

    .calendar.popup {

        margin-left: 30px;

    }

}

I guess that still only works on desktop if there are enough pixels between a form max-width and its container. Workable for me in this instance, but meh.

So calendar pop-up automatically detects the edge of the screen, regardless of what device is used, may I suggest that you inject the custom CSS codes below instead to your form.

.calendar.popup {

  right: 0px !important;

  left: inherit !important;

}

Note: This will, however, always show the calendar pop-up on the right edge of the screen.

Please give it a try and let us know if you need any further assistance.

Right, I don't like the idea of predetermining all the way left or right. Otherwise, that's what I was getting at before—OOTB left-aligned to the input until it will get cut off, then right: 0.

I'm happier with center-aligning to the input on desktop, but thank you for the collaboration.