# Date picker sizing \[RESOLVED\]

**URL:** <https://community.gravityforms.com/t/date-picker-sizing-resolved/16305>\
**Category:** Get Help\
**Tags:** avada, date-field, datepicker, css\
**Created:** [November 19, 2023, 7:29pm UTC](https://community.gravityforms.com/t/date-picker-sizing-resolved/16305 "2023-11-19T19:29:32Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![user61086a4ec00f9639](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user61086a4ec00f9639/32/3336_2.png) [@user61086a4ec00f9639](https://community.gravityforms.com/u/user61086a4ec00f9639)\
**Post date:** [November 19, 2023, 7:29pm UTC](https://community.gravityforms.com/t/date-picker-sizing-resolved/16305/1 "2023-11-19T19:29:33Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/f/f404169ac2c64be522ec1b3eff1f8ed029449536.png)

---

<div class="post-metadata">

**Author:** ![obijuan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/obijuan/32/13836_2.png) [@obijuan](https://community.gravityforms.com/u/obijuan)\
**Post date:** [November 20, 2023, 2:34pm UTC](https://community.gravityforms.com/t/date-picker-sizing-resolved/16305/2 "2023-11-20T14:34:12Z")

</div>

Hi, Tom.

The Date Drop Down should display like this by default:

![image](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/f/fbeb04e95a911eeb9999a1287be35fcef396c00e.png)

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

---

<div class="post-metadata">

**Author:** ![faisalahammad](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/faisalahammad/32/13948_2.png) [@faisalahammad](https://community.gravityforms.com/u/faisalahammad)\
**Post date:** [November 20, 2023, 6:00pm UTC](https://community.gravityforms.com/t/date-picker-sizing-resolved/16305/3 "2023-11-20T18:00:18Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![user61086a4ec00f9639](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user61086a4ec00f9639/32/3336_2.png) [@user61086a4ec00f9639](https://community.gravityforms.com/u/user61086a4ec00f9639)\
**Post date:** [November 22, 2023, 11:01am UTC](https://community.gravityforms.com/t/date-picker-sizing-resolved/16305/4 "2023-11-22T11:01:46Z")

</div>

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,](https://zalias.online/pildyti-zalios-kortos-paraiska/))

---

<div class="post-metadata">

**Author:** ![faisalahammad](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/faisalahammad/32/13948_2.png) [@faisalahammad](https://community.gravityforms.com/u/faisalahammad)\
**Post date:** [November 22, 2023, 11:46am UTC](https://community.gravityforms.com/t/date-picker-sizing-resolved/16305/5 "2023-11-22T11:46:07Z")

</div>

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**.

```auto
#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. 👇

 ![Screenshot](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/9/993af327622de12799ee1e3f5d50894a52a35606.jpeg)

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

---

<div class="post-metadata">

**Author:** ![user61086a4ec00f9639](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user61086a4ec00f9639/32/3336_2.png) [@user61086a4ec00f9639](https://community.gravityforms.com/u/user61086a4ec00f9639)\
**Post date:** [November 22, 2023, 12:42pm UTC](https://community.gravityforms.com/t/date-picker-sizing-resolved/16305/6 "2023-11-22T12:42:40Z")

</div>

> [@faisalahammad](#):
>
> ```auto
> #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;
> }
> 
> ```

Hello, thank you for your reply, but it not helping wery well 🙂 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](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/c/c62bcdf5262956e3e860a5457b31d8dfa31d20eb.png)

---

<div class="post-metadata">

**Author:** ![faisalahammad](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/faisalahammad/32/13948_2.png) [@faisalahammad](https://community.gravityforms.com/u/faisalahammad)\
**Post date:** [November 22, 2023, 9:31pm UTC](https://community.gravityforms.com/t/date-picker-sizing-resolved/16305/7 "2023-11-22T21:31:43Z")

</div>

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.

```auto
.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 👍

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/f/fef63f0599c45e0218c30d9f5d7ca8bff9b00189.png) [@system](https://community.gravityforms.com/u/system)\
**Post date:** [November 24, 2023, 9:59am UTC](https://community.gravityforms.com/t/date-picker-sizing-resolved/16305/8 "2023-11-24T09:59:23Z")

</div>

Closed on November 24, 2023, 9:59am UTC

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.