# Drop down design error

**URL:** <https://community.weweb.io/t/drop-down-design-error/4712>\
**Category:** How do I?\
**Created:** [October 3, 2023, 12:49pm UTC](https://community.weweb.io/t/drop-down-design-error/4712 "2023-10-03T12:49:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulgassner](https://avatars.discourse-cdn.com/v4/letter/p/46a35a/32.png) [@paulgassner](https://community.weweb.io/u/paulgassner)\
**Post date:** [October 3, 2023, 12:49pm UTC](https://community.weweb.io/t/drop-down-design-error/4712/1 "2023-10-03T12:49:18Z")

</div>

I built a rather simple drop down input field but I am struggling to fix a design detail. When an option is selected the text has a different spacing compared to my placeholder for an empty selection. The spacing for the placeholder is correct and I want to align the two.

Where can I edit the spacing when an option is selected?

My drop down with the placeholder and correct spacing:

 ![Screenshot 2023-10-03 at 13.37.56](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/93a900245148dc6474c5a1cb1914a9c1829e4c07.png)

Dropdown menu open:

 ![Screenshot 2023-10-03 at 13.38.00](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1992ad8233e53c9e1f4652d880cba4cc5c4c32f5.png)

Dropdown option selected and incorrect spacing:

 ![Screenshot 2023-10-03 at 13.38.05](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7e80c7d9d658d6f0264161f2fe67d485f9dba441.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 3, 2023, 4:31pm UTC](https://community.weweb.io/t/drop-down-design-error/4712/2 "2023-10-03T16:31:20Z")

</div>

I think the easiest is to have no padding on the placeholder text.

Here’s the dropdown with the option selected:

 ![CleanShot 2023-10-03 at 18.25.34@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6c32e2b705ea8838f912c2427b6c430e0b706293.png)

Here’s the dropdown closed with the placeholder:

 ![CleanShot 2023-10-03 at 18.27.01@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c583d3e4791a9f4a38a38a21b8cdf52673a5eed0.png)

Here’s the dropdown open in Text mode with the padding on the option text:

 ![CleanShot 2023-10-03 at 18.30.37@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9ad953a52bff83498796662ae30962e9da8748db.png)

Here’s the dropdown open in Free layout mode with the padding on my options container:

 ![CleanShot 2023-10-03 at 18.28.34@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3af630c2087e786e19549c6ed67c53de8ba4a944.png)

Does that help?