starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-25 16:55:59 +03:00

[GH-ISSUE #970] response content doesn't fit to the text area when resizing #342

New issue

Closed

opened 2026-03-16 14:47:25 +03:00 by kerem · 7 comments

kerem commented

2026-03-16 14:47:25 +03:00

Owner

Originally created by @ShahAnuj2610 on GitHub (Jul 2, 2020).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/970

Originally assigned to: @ShahAnuj2610 on GitHub.

To Reproduce

Hit any api (in my case GET: https://api.spacexdata.com/v3/launches)
Increase response height by dragging
Try scrolling and the response does not fit to the resized window
Check this video for more context

Expected behavior

resizing should work properly

Originally created by @ShahAnuj2610 on GitHub (Jul 2, 2020). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/970 Originally assigned to: @ShahAnuj2610 on GitHub. **To Reproduce** 1. Hit any api (in my case GET: https://api.spacexdata.com/v3/launches) 2. Increase response height by dragging 3. Try scrolling and the response does not fit to the resized window 4. Check [this](https://www.loom.com/share/9b029f8a9d3f4f609572dd0452918234) video for more context **Expected behavior** resizing should work properly

kerem

2026-03-16 14:47:25 +03:00

closed this issue
added the
bug

stale
labels

kerem commented

2026-03-16 14:47:41 +03:00

Author

Owner

@liyasthomas commented on GitHub (Jul 2, 2020):

Seems like an issue with ace editor in large responses. Will look into it.

@liyasthomas commented on GitHub (Jul 2, 2020): Seems like an issue with ace editor in large responses. Will look into it.

kerem commented

2026-03-16 14:47:46 +03:00

Author

Owner

@ShahAnuj2610 commented on GitHub (Jul 2, 2020):

@liyasthomas you can assign to me. I can look into it.

@ShahAnuj2610 commented on GitHub (Jul 2, 2020): @liyasthomas you can assign to me. I can look into it.

kerem commented

2026-03-16 14:47:51 +03:00

Author

Owner

@liyasthomas commented on GitHub (Jul 2, 2020):

Ahaa.. Great. Assigning this to you.

@liyasthomas commented on GitHub (Jul 2, 2020): Ahaa.. Great. Assigning this to you.

kerem commented

2026-03-16 14:47:56 +03:00

Author

Owner

@ShahAnuj2610 commented on GitHub (Jul 4, 2020):

@liyasthomas after some debugging, I found this couple of things

Remove maxLines

We need to remove maxLines from here
github.com/liyasthomas/postwoman@5d94ac361e/pages/index.vue (L998) and add height to parent div

Why?

whenever we resize, the ace-editor always sets it's content according to maxLines
If we call editor.resize, it would resize to fit container according to maxLines

Add height to parent div

github.com/liyasthomas/postwoman@5d94ac361e/components/ui/ace-editor.vue (L2)

Now whenever this div gets resized, we need to call editor.resize, so the content gets fitted according to the parent

How to detect resize on an element?

I found this library that could be used for resize event change on an element https://github.com/Akryum/vue-resize

Example of ace-editor resize

https://codepen.io/ourcodeworld/embed/BaBXbPb?height=400&theme-id=dark&default-tab=js%2Cresult&user=ourcodeworld&slug-hash=BaBXbPb&pen-title=Resizable%20ACE%20Editor&name=cp_embed_1

Open question

If we remove maxLines, then how to handle Expand Response feature. BC, currently we are setting maxLines: infinity on expand response
github.com/liyasthomas/postwoman@5d94ac361e/pages/index.vue (L2478)

Maybe sol'n

Calculate height according to this logic https://stackoverflow.com/questions/11584061/automatically-adjust-height-to-contents-in-ace-cloud-9-editor

Lmk, wdyt?

@ShahAnuj2610 commented on GitHub (Jul 4, 2020): @liyasthomas after some debugging, I found this couple of things ## Remove maxLines We need to remove `maxLines` from here https://github.com/liyasthomas/postwoman/blob/5d94ac361e8e2a324e6eca845bee311b6536016b/pages/index.vue#L998 and add height to parent div ### Why? - whenever we resize, the `ace-editor` always sets it's content according to `maxLines` - If we call `editor.resize`, it would resize to fit container according to `maxLines` ## Add height to parent div https://github.com/liyasthomas/postwoman/blob/5d94ac361e8e2a324e6eca845bee311b6536016b/components/ui/ace-editor.vue#L2 Now whenever this `div` gets resized, we need to call `editor.resize`, so the content gets fitted according to the parent ### How to detect resize on an element? I found this library that could be used for `resize` event change on an element https://github.com/Akryum/vue-resize ### Example of ace-editor resize https://codepen.io/ourcodeworld/embed/BaBXbPb?height=400&theme-id=dark&default-tab=js%2Cresult&user=ourcodeworld&slug-hash=BaBXbPb&pen-title=Resizable%20ACE%20Editor&name=cp_embed_1 ## Open question If we remove `maxLines`, then how to handle `Expand Response` feature. BC, currently we are setting `maxLines: infinity` on expand response https://github.com/liyasthomas/postwoman/blob/5d94ac361e8e2a324e6eca845bee311b6536016b/pages/index.vue#L2478 ### Maybe sol'n Calculate height according to this logic https://stackoverflow.com/questions/11584061/automatically-adjust-height-to-contents-in-ace-cloud-9-editor #### Lmk, wdyt?

kerem commented

2026-03-16 14:48:01 +03:00

Author

Owner

@liyasthomas commented on GitHub (Jul 4, 2020):

https://stackoverflow.com/questions/11584061/automatically-adjust-height-to-contents-in-ace-cloud-9-editor

suggests to use maxLines: Infinity to make editor expand to content height, so how can we remove maxLines property?

@liyasthomas commented on GitHub (Jul 4, 2020): > https://stackoverflow.com/questions/11584061/automatically-adjust-height-to-contents-in-ace-cloud-9-editor suggests to use `maxLines: Infinity` to make editor expand to content height, so how can we remove `maxLines` property?

kerem commented

2026-03-16 14:48:06 +03:00

Author

Owner

@ShahAnuj2610 commented on GitHub (Jul 5, 2020):

suggests to use maxLines: Infinity to make editor expand to content height, so how can we remove maxLines property?

A possible sol'n could be to reset maxLines when Collapse Response, and set it to Infinity when Expand Response. Although the above SO ans doesn't recommend to use maxLines: Infinity as there could be performance issues. Instead we can set the viewport height of the parent to 100vh and the parent's position would be relative and editor's position would be absolute

@ShahAnuj2610 commented on GitHub (Jul 5, 2020): > suggests to use maxLines: Infinity to make editor expand to content height, so how can we remove maxLines property? A possible sol'n could be to reset `maxLines` when `Collapse Response`, and set it to `Infinity` when `Expand Response`. Although the above SO ans doesn't recommend to use `maxLines: Infinity` as there could be performance issues. Instead we can set the viewport height of the parent to `100vh` and the parent's position would be `relative` and editor's position would be `absolute`

kerem commented

2026-03-16 14:48:11 +03:00

Author

Owner

@liyasthomas commented on GitHub (Jul 5, 2020):

A possible sol'n could be to reset maxLines when Collapse Response, and set it to Infinity when Expand Response.

Isn't this the current implementation? Frankly, I guess we can ignore this UI issue since it's only reproducible in such an edge case of large responses. Let me know if you can make a PR.

@liyasthomas commented on GitHub (Jul 5, 2020): > A possible sol'n could be to reset maxLines when Collapse Response, and set it to Infinity when Expand Response. Isn't this the current implementation? Frankly, I guess we can ignore this UI issue since it's only reproducible in such an edge case of large responses. Let me know if you can make a PR.

kerem referenced this issue

2026-03-17 00:27:01 +03:00

[PR #662] [MERGED] Added Support for MQTT #2774

kerem referenced this issue

2026-03-17 00:27:17 +03:00

[PR #663] [MERGED] Feature/mqtt #2776