# My notification panel has a scroll bar

**URL:** https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888
**Category:** Support
**Created:** [3월 6, 2019, 6:37오후 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888 "2019-03-06T18:37:46Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [3월 6, 2019, 6:37오후 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/1 "2019-03-06T18:37:46Z")

</div>

can’t the default number of notifications be 2-3numbers less so that no scroll bar may be needed? it’d be much nicer without scrollbar.

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/7/278dddc49ca296b5fc85c80885de2c8e399d7979.png)

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [3월 6, 2019, 6:38오후 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/2 "2019-03-06T18:38:24Z")

</div>

What screen resolution are you running at? Which browser is this? Do you have any level of browser zoom set?

On my browser the height and number of visible notification adjusts based on the height of the window.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [3월 6, 2019, 6:40오후 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/3 "2019-03-06T18:40:22Z")

</div>

no zooming, I just pressed ctrl+0 to be sure.

does screen resolution matter? it’s the default, 1366\*768.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [3월 7, 2019, 12:47오전 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/4 "2019-03-07T00:47:03Z")

</div>

This calculation varies, with some message sets it can overextend depending on the titles of the messages. It’s a complicated thing.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [3월 7, 2019, 4:18오전 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/5 "2019-03-07T04:18:53Z")

</div>

I see, but with 7 messages instead of 10, it’d be shorter. I guess shorter than height of the screen is nicer and more functional than scroll bar, isn’t it?

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [3월 7, 2019, 4:26오전 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/6 "2019-03-07T04:26:53Z")

</div>

You’re missing the point, the number of entries isn’t fixed at 10.

On my laptop screen I see 12, on my monitor I see 13. Neither has a scroll bar.

It’s not a UX issue, and it’s hard to say why you have a scrollbar because _you’ve hidden the notifications_.

---

<div class="post-metadata">

### Author: ![supermathie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/supermathie/32/507518_2.png) [@supermathie](https://meta.discourse.org/u/supermathie)
#### Post date: [3월 7, 2019, 5:44오전 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/7 "2019-03-07T05:44:00Z")

</div>

Yeah, some of them can have long titles and it’s not an easy thing to get perfect ☹

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/f/0fc4ea33b8b7f2ea4fba53b740e868175b56e357.jpeg)

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [3월 7, 2019, 6:03오전 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/8 "2019-03-07T06:03:19Z")

</div>

Maybe trim anything after the fourth row to reduce the chance?

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [3월 7, 2019, 5:37오후 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/9 "2019-03-07T17:37:50Z")

</div>

Ok, I see. but as I remember I’ve always seen the scroll bar (both in our forum and here in meta). of course, I’ve always used the same laptop!

---

<div class="post-metadata">

### Author: ![P16](https://avatars.discourse-cdn.com/v4/letter/p/b19c9b/32.png) [@P16](https://meta.discourse.org/u/P16)
#### Post date: [3월 7, 2019, 11:28오후 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/10 "2019-03-07T23:28:13Z")

</div>

> [@supermathie](#):
>
> Yeah, some of them can have long titles and it’s not an easy thing to get perfect ☹

Shouldn’t the text be trimmed to ensure it doesn’t overextend? The trim would only affect the topic titles, which the user is generally familiar with.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [3월 8, 2019, 2:32오전 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/11 "2019-03-08T02:32:28Z")

</div>

> [@P16](#):
>
> Shouldn’t the text be trimmed to ensure it doesn’t overextend?

It’s not only topic titles that will push text to the next line…

 ![20%20PM](https://global.discourse-cdn.com/meta/original/3X/b/0/b0205d011ad11cd95658829293dfbfb21825e94c.png)

Username, notification type, topic title, and locale are all factors that make the height of each notification variable… so it’s very unpredictable.

I think we could only really avoid the scrollbar (for most screens) if we limited the number of notifications to around 10 (I can currently see 21).

---

<div class="post-metadata">

### Author: ![P16](https://avatars.discourse-cdn.com/v4/letter/p/b19c9b/32.png) [@P16](https://meta.discourse.org/u/P16)
#### Post date: [3월 8, 2019, 2:47오전 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/12 "2019-03-08T02:47:40Z")

</div>

> [@awesomerobot](#):
>
> ![20%20PM](https://global.discourse-cdn.com/meta/original/3X/b/0/b0205d011ad11cd95658829293dfbfb21825e94c.png)  
> Username, notification type, topic title, and locale are all factors that make the height of each notification variable… so it’s very unpredictable.

I think there are three possible solutions to this:

1. ❤ bcced5b.. and 7 others **Reserved usernames:..**  
Take the first user and trim it if its too long

2. ❤ Chaboi\_3000 and 7 others **Reserved usernames:..**  
Take the next short username if the first one is too long - if all usernames are too long, trim the first one

3. ❤ 8 people **Reserved usernames:..**  
Just state the number of users if 2 or more (and trim if only one which is too long)

PS: A little colour would be so nice in the notifications icons 🙂

---

<div class="post-metadata">

### Author: ![Mixonepa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mixonepa/32/129720_2.png) [@Mixonepa](https://meta.discourse.org/u/Mixonepa)
#### Post date: [3월 8, 2019, 3:22오전 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/13 "2019-03-08T03:22:52Z")

</div>

I agree with the colors.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [3월 8, 2019, 3:42오전 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/14 "2019-03-08T03:42:49Z")

</div>

> [@P16](#):
>
> I think there are three possible solutions to this:

All of these options are reducing information for the sake of not having a scrollbar, which feels really extreme. We don’t have immediate plans to do so, but If anything we’d probably double-down on the scrollbar and make the notification panel scroll infinitely.

> [@P16](#):
>
> A little colour would be so nice in the notifications icons

Colors are off-topic and are very easy in a theme.

```scss
.user-menu .notifications {
  .d-icon-heart {
    color: salmon;
  }
}

```

We have a lot of notification types, and we intentionally limit our color palette so it’s easier to define your own… so we’d never really do full color-coding by default.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [8월 10, 2020, 10:37오후 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/15 "2020-08-10T22:37:46Z")

</div>

방금 알림 드롭다운에서 스크롤바를 제거하는 업데이트를 적용했습니다. 이제 브라우저 높이에 따라 확인할 수 있는 알림 수가 자동으로 조정됩니다. Meta에서 바로 확인해 볼 수 있습니다.

---

<div class="post-metadata">

### Author: ![xrav3nz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xrav3nz/32/76894_2.png) [@xrav3nz](https://meta.discourse.org/u/xrav3nz)
#### Post date: [8월 15, 2020, 11:43오후 UTC](https://meta.discourse.org/t/my-notification-panel-has-a-scroll-bar/110888/16 "2020-08-15T23:43:02Z")

</div>

> [@awesomerobot](#):
>
> 보일 수 있는 알림의 수는 브라우저 높이에 따라 조정됩니다.

@awesomerobot 님은 여기서 자신의 성과를 과소평가한 것 같습니다.

저희도 예전에는 브라우저 높이에 따라 알림 수를 조정했지만, 스크롤바가 나타나는 것을 방지하거나 내용이 넘치지 않도록 하기 위해 값을 낮추어 추정해야 했습니다.

모바일(적어도 iOS의 경우)에서는 이로 인해 하단에 **큰 수직 간격** 이 생기는 경우가 많았습니다:

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/0/b02e35df1cc3d36d0f376370cbe3be4f31efb681.jpeg)

Kris님의 마법 같은 CSS 실력이 이 문제를 해결했습니다. 이제 화면에 맞도록 가능한 한 많은 알림이 올바르게 표시됩니다.

 ![IMG_B3CCD60B53BC-1](https://global.discourse-cdn.com/meta/original/3X/a/6/a62a3f8029c28e78d2b60adda206bfc6957d3b00.png)

오래도록 신경 쓰였던 부분이었는데… 이 부분을 개선해 주셔서 감사합니다. 정말 기분 좋은 놀라움입니다!
