# Jumping reply box

**URL:** https://meta.discourse.org/t/jumping-reply-box/84117
**Category:** UX
**Created:** [March 29, 2018, 10:40am UTC](https://meta.discourse.org/t/jumping-reply-box/84117 "2018-03-29T10:40:18Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [March 29, 2018, 10:40am UTC](https://meta.discourse.org/t/jumping-reply-box/84117/1 "2018-03-29T10:40:18Z")

</div>

**Version of Discourse:** [v2.0.0.beta5 +75](https://github.com/discourse/discourse/compare/52e75eaee97669bdb5c0437feb5dee037a36e0d6...tests-passed)  
**Browser:** Firefox Quantum 59.0.2 (64-bit)  
**Screen Res:** 1366 x 768

**How to reproduce:**  
Place the top of the reply box on the bottom of the post in a topic with replies.

 ![reply-jump](https://global.discourse-cdn.com/meta/original/3X/0/9/09d2c61c371e5b907aa67813ba91d49b43af1bbf.gif)

```plaintext
#reply-control .reply-area {
    margin: 0 auto;
    padding: 5px 15px;
    box-sizing: border-box;
    height: calc(100% - 11px);
    width: 99%; << Setting the width to 99% fixed it for me
}

```

---

<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: [March 29, 2018, 11:04am UTC](https://meta.discourse.org/t/jumping-reply-box/84117/2 "2018-03-29T11:04:25Z")

</div>

So very wide but not very tall? What is the actual window size in pixels?

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [March 29, 2018, 11:06am UTC](https://meta.discourse.org/t/jumping-reply-box/84117/3 "2018-03-29T11:06:03Z")

</div>

> [@codinghorror](#):
>
> So very wide but not very tall? What is the actual window size in pixels?

Can you please elaborate I have no idea what you mean, sorry

---

<div class="post-metadata">

### Author: ![notriddle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/notriddle/32/133055_2.png) [@notriddle](https://meta.discourse.org/u/notriddle)
#### Post date: [March 29, 2018, 4:28pm UTC](https://meta.discourse.org/t/jumping-reply-box/84117/4 "2018-03-29T16:28:02Z")

</div>

I can reproduce in Firefox with a 1280x720 browser window, on meta, by picking Laptop in “Responsive Design Mode”, scrolling around, and noticing the scrollbar at the bottom appear and disappear as I do so. I notice that the scrollbar appears when I pass the bottom of the post stream, and does not appear while I’m in the middle of the post stream.

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [March 29, 2018, 4:55pm UTC](https://meta.discourse.org/t/jumping-reply-box/84117/6 "2018-03-29T16:55:17Z")

</div>

I can also reproduce in Chrome - from my testing - `$(window).width()` is 1000, `$(window).height()` is 540.

When scrolling past the last topic, the horizontal scrollbar appears and `$(window).height()` becomes 523. There is a “sweet spot” when the jumping occurs in which the horizontal scroll appears and disappears without user interaction in between the last topic and past the topic.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [March 29, 2018, 6:46pm UTC](https://meta.discourse.org/t/jumping-reply-box/84117/7 "2018-03-29T18:46:14Z")

</div>

I had reported this a little while back. Sounds like it might get looked into at some point:

> [@For specific browser widths, horizontal scroll bar appears](https://meta.discourse.org/t/for-specific-browser-widths-horizontal-scroll-bar-appears/83230/3):
>
> rofl Unfortunately that would require buying a new computer! On a 13" MacBook Pro, the composer touches the edges of the window at maxed browser size. Here’s another weird thing that can happen because of it: [https://streamable.com/7y8pc](https://streamable.com/7y8pc) With that said, this is a minor thing that the majority of users probably won’t encounter.

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [March 29, 2018, 6:49pm UTC](https://meta.discourse.org/t/jumping-reply-box/84117/8 "2018-03-29T18:49:19Z")

</div>

I’ll add that I’m using a Laptop with a 15" screen, resolution is 1366 x 768

Not only does the screen jump around, a scrollbar appears when you move past the last post

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [March 29, 2018, 6:52pm UTC](https://meta.discourse.org/t/jumping-reply-box/84117/9 "2018-03-29T18:52:01Z")

</div>

Yep, also mentioned in my report 🙂 That’s the core of the problem. It looks like I can reproduce it up to about 1475px width. Once the composer “detaches” from the sides of the browser window, it goes away.

---

<div class="post-metadata">

### Author: ![Vaping\_Community](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vaping_community/32/89248_2.png) [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [March 29, 2018, 7:14pm UTC](https://meta.discourse.org/t/jumping-reply-box/84117/10 "2018-03-29T19:14:14Z")

</div>

This works perfectly..

```plaintext

#topic-progress-wrapper.docked {

    right: 19vw;
    margin-right: 1px; <<< This works..

}

```

---

<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: [March 29, 2018, 7:37pm UTC](https://meta.discourse.org/t/jumping-reply-box/84117/11 "2018-03-29T19:37:05Z")

</div>

Maybe @awesomerobot can take a look when he has time.
