# Emoji-Picker shows itself in an unoptimized Position

**URL:** https://meta.discourse.org/t/emoji-picker-shows-itself-in-an-unoptimized-position/79495
**Category:** UX
**Created:** [31 januari 2018 om 21:54 UTC](https://meta.discourse.org/t/emoji-picker-shows-itself-in-an-unoptimized-position/79495 "2018-01-31T21:54:05Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![gege](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gege/32/88367_2.png) [@gege](https://meta.discourse.org/u/gege)
#### Post date: [31 januari 2018 om 21:54 UTC](https://meta.discourse.org/t/emoji-picker-shows-itself-in-an-unoptimized-position/79495/1 "2018-01-31T21:54:06Z")

</div>

# Video first:

[https://global.discourse-cdn.com/meta/original/3X/f/1/f1ac72dab0e910563194e5ce27a94cd553a50da6.mp4](https://global.discourse-cdn.com/meta/original/3X/f/1/f1ac72dab0e910563194e5ce27a94cd553a50da6.mp4)

# Env:

OS: Win10  
Browser: Google Chrome (plugins disabled)  
Site: `https://meta.discourse.org/u/{your user name here}/preferences/profile`  
reproducible: Yes

# Description:

(I don’ t kown if it is intended to be.) I found that the position of emoji-picker of main composer in the past few days was fixed, but not in user’ s Profile . Moreover skincolor of emojis in the Picker-box showed itself in my case neither completely nor sticky. I changed Browser(Chrome) to Firefox and with non-plugins tried again, but issues still exsited. This problem should be fixed in the future.

I found this code clip in `emoji.scss`. This is common style for every emoji-picker both in main composer and bio-composer.

```scss
.emoji-picker {
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  background-clip: padding-box;
  z-index: z("modal","content"); 
  position: fixed;
  display: none;
  flex-direction: row;
  height: 300px;
  border-radius: 3px;
  color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
  background-color: $secondary;
  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
}

```

# Give a try, but no joy:

I tried to change `position: fixed;` to `position: absolute;` but i failed. Everytime i clicked emoji-button, the inline-style was going to be inserted automatically.

I am not a developer, no idea how to solve it, so i report it to the ‘open air’. 😅

Kind regards to discourse team and fans  
happy coding!

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [31 januari 2018 om 22:35 UTC](https://meta.discourse.org/t/emoji-picker-shows-itself-in-an-unoptimized-position/79495/3 "2018-01-31T22:35:21Z")

</div>

I always forget the picker is used here too. Will give it a look in the next days.

---

<div class="post-metadata">

### Author: ![nbianca](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nbianca/32/157984_2.png) [@nbianca](https://meta.discourse.org/u/nbianca)
#### Post date: [27 mei 2019 om 12:30 UTC](https://meta.discourse.org/t/emoji-picker-shows-itself-in-an-unoptimized-position/79495/6 "2019-05-27T12:30:12Z")

</div>

✔ The positioning was broken only on desktop and is now fixed.

[https://github.com/discourse/discourse/pull/7602](https://github.com/discourse/discourse/pull/7602)

---

<div class="post-metadata">

### Author: ![nbianca](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nbianca/32/157984_2.png) [@nbianca](https://meta.discourse.org/u/nbianca)
#### Post date: [30 mei 2019 om 08:51 UTC](https://meta.discourse.org/t/emoji-picker-shows-itself-in-an-unoptimized-position/79495/7 "2019-05-30T08:51:36Z")

</div>