# sticky header for responsive (smartphone) view

**URL:** https://support.prodi.gy/t/sticky-header-for-responsive-smartphone-view/6284
**Category:** Uncategorized
**Tags:** solved
**Created:** [January 25, 2023, 5:36pm UTC](https://support.prodi.gy/t/sticky-header-for-responsive-smartphone-view/6284 "2023-01-25T17:36:14Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![nounverbnoun](https://avatars.discourse-cdn.com/v4/letter/n/bbe5ce/32.png) [@nounverbnoun](https://support.prodi.gy/u/nounverbnoun)
#### Post date: [January 25, 2023, 5:36pm UTC](https://support.prodi.gy/t/sticky-header-for-responsive-smartphone-view/6284/1 "2023-01-25T17:36:14Z")

</div>

Hi,

I would like to be able to have a sticky header that I can inject text into (e.g. "text" from the jsonl) for each annotation example. This way, for my custom html\_template, which has custom annotation radio buttons/checkboxes, the original "text" from the jsonl is always visible as they scroll. (Normally I have just put it in the top of the html\_template when the annotation interface is not too big/busy.)

I've been using blocks in my recipes and html\_template & javscript in the config for this and the global\_css in the prodigy.json file.

Since I am not an expert at the prodigy interface , would it be possible to create a small example recipe that does something similar to this using html\_template & javascript in the recipe config, along with some amount of global\_css I suppose?

If this already exists, sorry for the post, I've really looked everywhere in the Support forums for it.

Btw, the annotation usecase for this is an initial original text string and multiple translations of it, where each translation has a mini Likert scale type annotation feedback. I would like the annotators to be able to scroll through all of the multiple translations and label each of them, while also being able to see the original sequence at the top.

Thank you very much for everything you have done with prodigy and spacy!

---

<div class="post-metadata">

### Author: ![koaning](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/koaning/32/230_2.png) [@koaning](https://support.prodi.gy/u/koaning)
#### Post date: [January 26, 2023, 10:17am UTC](https://support.prodi.gy/t/sticky-header-for-responsive-smartphone-view/6284/2 "2023-01-26T10:17:54Z")

</div>

I wrote a small tutorial on making text blocks scrollable here:

> [@Is it possbile to freeze the text-input interface while scrolling through the text data?](https://support.prodi.gy/t/is-it-possbile-to-freeze-the-text-input-interface-while-scrolling-through-the-text-data/5948):
>
> Hello there! I am writing summaries for some (long) text data in a text-input interface. I wonder if there is a way to freeze the text-input interface/box which I put above the text data, so that when I scroll through the text data, especially for long ones, I can still look at my current summary, in a way similar to the frozen blue banner of entity names in the NER interface? Thank you!

Would that help in your situation?

---

<div class="post-metadata">

### Author: ![nounverbnoun](https://avatars.discourse-cdn.com/v4/letter/n/bbe5ce/32.png) [@nounverbnoun](https://support.prodi.gy/u/nounverbnoun)
#### Post date: [January 26, 2023, 2:50pm UTC](https://support.prodi.gy/t/sticky-header-for-responsive-smartphone-view/6284/3 "2023-01-26T14:50:37Z")

</div>

Thank you! Yes, this looks like it may be a solution. I'll work on this and let you know how it turns out.

---

<div class="post-metadata">

### Author: ![nounverbnoun](https://avatars.discourse-cdn.com/v4/letter/n/bbe5ce/32.png) [@nounverbnoun](https://support.prodi.gy/u/nounverbnoun)
#### Post date: [January 27, 2023, 4:15pm UTC](https://support.prodi.gy/t/sticky-header-for-responsive-smartphone-view/6284/4 "2023-01-27T16:15:40Z")

</div>

I adapted your scrollable text block for my use case, thank you!
