Date picker sizing [RESOLVED]

Get Help
, , ,
1

Hello, i want to make date picker windows ( Date Drop Down) a little bigger to normally show year month date or make arow smaller as it hide almost half of date picker window

image
image942×421 21.7 KB

2

Hi, Tom.

The Date Drop Down should display like this by default:

image

Can you please check for any front-end conflicts on your website? Either produced by a third-party plugin or your active theme.

3

Hey Tom,
Could you please share your exact webpage URL where you’re having the date picker (small size) issue? So I can further investigate to resolve it?

4

Hello here are the link where if at the bottom you select number of childrens you will get date picker with that look

Summary

Pildyti žalios kortos paraišką - ZALIAKORTA.EU - DV loterija DV2026, zalios kortos pildymas, dv loterijos pildymas, dalyvauti dv loterijoje, zalia korta, dv lottery,)

5

Hey Tom,

The issue is caused by the Avada theme conflict. To resolve the issue, please use the following CSS in your child theme’s style.css file or in Appearance → Customize → Additional CSS.

#input_4_6.ginput_complex .gravity-select-parent {
  width: 100% !important;
}

#input_4_6.ginput_complex .ginput_container_date select {
  min-width: 130px !important;
}

#input_4_6 .gravity-select-parent .select-arrow {
  left: 80px !important;
}

Then, the output will look like the following screenshot. :point_down:

Screenshot
Screenshot2720×1200 218 KB

Give it a try, and let me know how that goes! :smile:

6

Hello, thank you for your reply, but it not helping wery well :slight_smile: this code only changes that parts which are in code, So if I have 6 parts for 6 children s then I need to add the same code for ewery part other vice it will look like this

image
image1583×757 64.1 KB

7

Hey Tom,

Please try the following code instead of the last provided code. This code will be applied to all date fields you are using on your website.

.gfield--type-date .ginput_complex .gravity-select-parent {
  width: 100% !important;
}

.gfield--type-date .ginput_complex .ginput_container_date select {
  min-width: 130px !important;
}

.gfield--type-date .gravity-select-parent .select-arrow {
  left: 80px !important;
}

Please keep me posted about the outcome. Thank you :+1: