SIGN UP

Datepicker isn't displaying the full calendar on the mobile version of the site

By: desiredisco | Asked: 10/05/2023
Forums › Category: Code Help › Datepicker isn't displaying the full calendar on the mobile version of the site
0 Vote Up Vote Down
desiredisco asked 7 months ago
https://www.starlight.events/contact-us/ is where the problem is occuring. If you access the page on a mobile device then proceed to select a date, the datepicker doesn't allow you to select Fri / Sat as they aren't visible on the screen. Having inspected the element, I can see the following CSS can change the size of the calendar so it fits, however, I cannot translate these changes to formidable itself (it's as if it's being ignored, even with !important tag added), and so I cannot change the appearance of the form. min-width: 0em; Any help with getting this CSS to my site and working would be appreciated. Thank you, Matthew
2 Answers
0 Vote Up Vote Down
Rob LeVineRob LeVine answered 7 months ago
Did you try 
.frm-datepicker {
    min-width: 0em;
}
desiredisco replied 7 months ago

I did, yes. It had no effect. I put this in the custom CSS section of my theme customisation. I also added !important after 0em and before ;
Thank you for your response 🙂

0 Vote Up Vote Down
Victor Font answered 7 months ago
You should be using .ui-datepicker to set the min-width to 0em instead of frm-datepicker.
desiredisco replied 7 months ago

No effect.

Victor Font replied 7 months ago

That’s definitely the right class to target. You can see this for yourself in the inspector. Are you placing the script in the before fields area of the form’s custom HTML page? Are you clearing all caches?

desiredisco replied 7 months ago

Yes, this is what I had been changing in the element when using inspect. Anything I put across into the custom CSS area, regardless of where I've put it has had no effect. Here's what's in the custom CSS at present (including the .ui-datepicker line:

#home-hero {
background-color: transparent;
}

.hero-title {
font-size: 3em;
line-height: 1;
color: #000000;
margin: 20px 0;
}

#home-section {
padding: 10px 0 10px;
}

.home-section-2 {
background: transparent;
}
.home-section-2, .home-section-4 {
background-color: transparent;
}
#body .ui-datepicker {
min-width: 0em; !important
}

Victor Font replied 7 months ago

You're calling .ui-datepicker incorrectly. Remove the #body.

desiredisco replied 7 months ago

I've now changed to the following (but it has no effect):
#home-hero {
background-color: transparent;
}

.hero-title {
font-size: 3em;
line-height: 1;
color: #000000;
margin: 20px 0;
}

#home-section {
padding: 10px 0 10px;
}

.home-section-2 {
background: transparent;
}
.home-section-2, .home-section-4 {
background-color: transparent;
}
.ui-datepicker {
min-width: 0em; !important
}

Victor Font replied 7 months ago

!important goes before the semi-colon. Not after. Your code is still wrong.

desiredisco replied 7 months ago

That's done the trick, I'm sure I'd amended that previously so it always helps to have a fresh pair of eyes. Thank you so much!

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right