Scrollable transcript and other lengthy metadata

Transcripts can sometimes be unsightly with messy OCR data. A lengthy transcript can also be strange and disorienting, pushing other metadata far down beyond reach. This recipe will make the transcript scrollable if it’s too long. Similarly, if you have other lengthy metadata fields such as description, you can also make it scrollable.

The top part of the recipe deals with the transcript. It caps the height of the div containing the transcript to be no more than 200 pixels. If the transcript is longer than that, a scrollbar will automatically show up.

For a metadata field, it’s a little trickier. You need to identify the CSS class name for the <tr> containing the metadata field. You can find the name using the browser’s inspector. For example, this description field is in a <tr> class called “field-descri”:

… …

<tr class="ItemMetadata-metadatarow field-descri">

            <td class="ItemMetadata-key field-label">Description</td>

            <td class="field-value">

                        <span>This is the content of the description field.

                                    … …

                                    … …

                        </span>

            </td>

</tr>

… …

The second part of the recipe will make this Description field scrollable if it’s longer than 100 pixels.

You can add the downloaded CSS file to Global Custom CSS, or to a Collection-level Custom CSS.