Hi Solo,

I'm assuming you're using a custom recipe here? I think the easiest method to get what you want might be use a custom HTML template with some CSS rules that make the text to summarise scrollable, but not your text input.

##
Demo Implementation

Let's say, for demo purposes, that this is my data stored in an `examples.jsonl`

file.

```
{"text": "this text is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long"}
{"text": "this text is short"}
```

The first example is meant to demonstrate that we're dealing with a long example that we'd like a scrollbar to appear for. This can be achieved by rendering it inside of an HTML element that uses a fixed height and a `overflow: auto;`

css property.

Here's a custom recipe that uses a template for this.

```
import prodigy
from prodigy.components.loaders import JSONL
@prodigy.recipe(
"summary",
dataset=("Dataset to save answers to", "positional", None, str),
examples=("Examples to load from disk", "positional", None, str),
)
def summary(dataset, examples):
stream = JSONL(examples)
def add_html(examples):
for ex in examples:
ex["html"] = f"""
<b>Main Text</b>
<div style="overflow: auto; height: 200px;" >
<p>{ex['text']}</p>
</div>
<b>Summary</b>
"""
yield ex
return {
"dataset": dataset,
"stream": add_html(stream),
"view_id": "blocks",
"config": {
"blocks": [
{"view_id": "html"},
{"view_id": "text_input", "field_rows": 3},
]
}
}
```

There's a few things to note in this recipe.

- Note that in the
`add_html`

function I'm building some HTML to render using an f-string. The text is placed in an element that has `overflow: auto;`

set and has a height predefined as well.
- This HTML will be rendered because I've set the
`view_id`

to `blocks`

at the bottom of the recipe and in the `config.blocks`

setting I'm showing a list of elements to render. The HTML will be rendered together with a text field that has 3 rows.

I can now run this recipe like so;

```
python -m prodigy summary issue-5948 examples.jsonl -F recipe.py
```

##
Result

This is what the interface now looks like:

##
Details

When you save your annotation you can run `db-out`

to see what's been stored on our behalf.

```
> python -m prodigy db-out issue-5948 | jq
```

This will yield:

```
{
"text": "this text is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long",
"html": "\n <b>Main Text</b>\n <div style=\"overflow: auto; height: 200px;\" >\n <p>this text is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long</p>\n </div>\n <b>Summary</b>\n ",
"_input_hash": 1123455936,
"_task_hash": 2085830771,
"_view_id": "blocks",
"user_input": "yeh this is long",
"answer": "accept",
"_timestamp": 1663762192
}
```

You'll notice that we are storing both the text and the generated HTML. This can be a bit "heavy" since we're storing the same information twice. You could implement a before_db-callback if you want to filter out the `HTML`

element after it's been annotated if you want to prevent this.