# Remove empty space on select option

**URL:** <https://discourse.getcockpit.com/t/remove-empty-space-on-select-option/1245>\
**Category:** Support\
**Created:** [March 5, 2020, 1:49am UTC](https://discourse.getcockpit.com/t/remove-empty-space-on-select-option/1245 "2020-03-05T01:49:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hafizi](https://avatars.discourse-cdn.com/v4/letter/h/8c91f0/32.png) [@hafizi](https://discourse.getcockpit.com/u/hafizi)\
**Post date:** [March 5, 2020, 1:49am UTC](https://discourse.getcockpit.com/t/remove-empty-space-on-select-option/1245/1 "2020-03-05T01:49:21Z")

</div>

I always get an empty option in the select field types, even though I defined a default option and add correct field types ‘select’. need suggestion and help how to solve this,

{  
“options”: “Live, Under Maintenance”,  
“default”: “Live”  
}

 ![image-2020-03-04-15-57-24-474](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/d4f1c5c1160bf5a2b51d037fdd0bf90ab4233c77.jpeg)

---

<div class="post-metadata">

**Author:** ![lebowvsky](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/lebowvsky/32/912_2.png) [@lebowvsky](https://discourse.getcockpit.com/u/lebowvsky)\
**Post date:** [September 16, 2021, 8:53pm UTC](https://discourse.getcockpit.com/t/remove-empty-space-on-select-option/1245/2 "2021-09-16T20:53:02Z")

</div>

Hi @hafizi 🙂,  
Did you solve your problem with your empty option ?  
I tried this [solution](https://discourse.getcockpit.com/t/select-field-label-for-each-value/145/8) but it doesn’t work for me…

---

<div class="post-metadata">

**Author:** ![abernh](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/abernh/32/859_2.png) [@abernh](https://discourse.getcockpit.com/u/abernh)\
**Post date:** [September 17, 2021, 2:47pm UTC](https://discourse.getcockpit.com/t/remove-empty-space-on-select-option/1245/3 "2021-09-17T14:47:09Z")

</div>

Currently there is always an empty option rendered with the other select options

> <https://github.com/agentejo/cockpit/blob/568b0124352f6d27df359e8c19a70d2dd1961e87/modules/Cockpit/assets/components/field-select.tag#L4>

You could create a JS script, that is loaded after rendering and removing the first empty option.  
Or use a CSS block.

```auto
// config/bootstrap.php

$app->on('collections.entry.aside', function ($collectionName) {
  echo "
<style>
 select[bind^=\"entry\"] > option[value=\"\"]:first-child{ display: none; }
</style>
  ";
});

```

---

<div class="post-metadata">

**Author:** ![lebowvsky](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/lebowvsky/32/912_2.png) [@lebowvsky](https://discourse.getcockpit.com/u/lebowvsky)\
**Post date:** [September 24, 2021, 9:59pm UTC](https://discourse.getcockpit.com/t/remove-empty-space-on-select-option/1245/4 "2021-09-24T21:59:43Z")

</div>

Thanks abernh, 🙂  
I’ll do that!!!