Dev tools -> Template: add scrollbars

New try after 2024.8:

Meanwhile an external JS may be used:

customElements.whenDefined('developer-tools-template').then(() => {
  const TemplatePanel = customElements.get('developer-tools-template');
  const { html, css } = TemplatePanel.prototype;
  
  // defined added style
  const newStyle = css`
  .content.horizontal {
    --code-mirror-max-height: calc(100vh - 410px);
    max-height: calc(var(--code-mirror-max-height) + 150px);
  }
  .content.horizontal > * {
    width: 50%;
    margin-bottom: 0px;
  }
  .rendered {
    overflow: auto;
    max-height: calc(var(--code-mirror-max-height) - 30px);
  }
  `;

  const newStyles = [].concat(TemplatePanel.styles, newStyle);
  Object.defineProperty(TemplatePanel, 'styles',        {value: newStyles, configurable: true, enumerable: false});
  Object.defineProperty(TemplatePanel, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});

Can be closed in 2025.1

should there also be a scroll bar in the result pane? because there isnt:

What I see is

Is it an attribute with some long value?
Can you post this value?

Another example with long value for an attribute:

yes, its the description attribute of a feedreader event. All I can see is the browser window scrollbar, but that scrolls the complete view, and not just the result pane.

what sun attribute is that…?

result
<img alt="3 2 1 backup" src="https://www.home-assistant.io/images/blog/2025-01-backups/art.jpg" />
<p>Home Assistant is a powerful tool that can save you time and money by automating your home. Pretty important things around the home, from heating to an automatic fish feeder, need to depend on it. However, as your setup grows more complex, maintaining it—what we call <em>“digital housekeeping”</em>—can become a time-consuming task. Backups are a critical part of this maintenance, yet they’re often overlooked, especially by new users, often until it is too late when disaster strikes.</p>
<p>To make backups effortless, we’ve introduced new automated and off-site backup features in <a href="https://www.home-assistant.io/blog/2025/01/03/release-20251/">the latest release of Home Assistant</a>. These improvements will make it easier than ever to safeguard your setup. As we step into the New Year, we would encourage you to adopt a simple yet crucial resolution: regularly back up your data. With our new tools, it takes just five minutes to set up and provides lasting peace of mind.</p>
<p>Learn more about our backups below, or get started now by <a href="https://my.home-assistant.io/redirect/updates/">updating</a> and visiting the <a href="https://my.home-assistant.io/redirect/backup/">backups</a> page.</p>
<!--more-->
<h2>What’s in a backup?</h2>
<p>Backups are essential for a reliable smart home. They protect your system from hardware failures, natural disasters, and cyberattacks, allowing you to quickly restore operations. A solid backup strategy follows the 3-2-1 rule:</p>
<ul>
<li>3 copies of your data</li>
<li>2 stored on different media</li>
<li>1 kept off-site</li>
</ul>
<p>While this may seem excessive, consider a scenario like a lightning strike: both your Home Assistant system and any local storage, like network-attached storage (NAS), could be destroyed. That’s why an off-site backup is non-negotiable for true resilience, and a comprehensive backup strategy should include:</p>
<ul>
<li>Regular and frequent backups of critical data</li>
<li>Following the 3-2-1 rule for redundancy</li>
<li>Encrypting backups to protect against theft and corruption</li>
<li>Testing backups to ensure they are functional</li>
<li>Defining how long backups should be retained</li>
</ul>
<p>To support these best practices, we have worked hard to introduce Automatic Backups and seamless integration with off-site backup location providers, such as <a href="https://www.home-assistant.io/cloud/">Home Assistant Cloud</a>. These updates, part of <a href="https://www.home-assistant.io/blog/2024/06/12/roadmap-2024h1/#home-assistant-cloud-peace-of-mind">our 2024 roadmap</a>, make it easier than ever to provide peace of mind to our users, by implementing a robust backup strategy, and keep your smart home running smoothly.</p>
<h2>Backups have never been this easy</h2>
<img alt="the backup page" src="https://www.home-assistant.io/images/blog/2025-01-backups/backups.png" style="border: 0;" />
<p>Home Assistant backups are incredibly good, backing up every setting and add-on, making restores feel a bit like magic. It even works across different CPU architectures! Up until recently setting up a 3-2-1 backup strategy in Home Assistant was not entirely straightforward. This changes with Home Assistant 2025.1, where we’re elevating our backup experience with three new important features.</p>
<ul>
<li><strong>Automatic encrypted backups</strong> - You can now schedule automatic backups every night or once a week, ensuring you always have a recent backup at hand.</li>
<li><strong>Automatic cleanup</strong> - No longer worry about backups overrunning your disk space, as you can now set the maximum number of backups that should be stored.</li>
<li><strong>Backup locations</strong> - We have added a new system for integrations to provide backup locations (also known as <a href="https://developers.home-assistant.io/docs/core/platform/backup">backup agents</a>), allowing you to sync backups to both local or off-site storage. It’s launching with support for <a href="https://my.home-assistant.io/redirect/storage/">network shares</a> and <a href="https://my.home-assistant.io/redirect/cloud/">Home Assistant Cloud</a> (included at no additional cost to subscribers), with more locations to follow.</li>
</ul>
<h3>Get started with our Backup Wizard</h3>
<img alt="the backup wizard" src="https://www.home-assistant.io/images/blog/2025-01-backups/wizard.png" style="border: 0;" />
<p>The new automatic backup feature in Home Assistant 2025.1 comes with a new easy to use backup wizard. With a couple of clicks, you can backup your Home Assistant system on a regular schedule and easily choose the places where backups are stored. New users will be prompted with a wizard to make sure they set up automatic encrypted backups. Selecting the recommended settings ensures that a backup is made every night, that three backups are kept, and that they are uploaded to all available locations.</p>
<h3>Backup locations</h3>
<img alt="backup locations" src="https://www.home-assistant.io/images/blog/2025-01-backups/locations.png" style="border: 0;" />
<p>At launch, only a few backup locations will be available, but we’ve made it easy for developers to integrate more, so expect a lot of options to follow. As part of this renewed focus on smart home resilience set out in <a href="https://www.home-assistant.io/blog/2024/06/12/roadmap-2024h1/#next-priority-encrypted-cloud-backup">our roadmap</a>, cloud backup has been added to <a href="https://www.home-assistant.io/cloud/">Home Assistant Cloud</a>, which will be available day one to all subscribers for no additional cost. It will only store the latest backup, which must be under 5GB (you’ll be notified to repair it if it is too large to upload). If you lose your other backups, you can always go to <a href="https://account.nabucasa.com/">your Cloud account page</a> and download the latest backup.</p>
<p>New Home Assistant features like this supercharged backup capability is only possible with funding from our Home Assistant Cloud subscribers. Adding backup to the subscription at no additional cost, was the least we could do to thank them for their continued support.</p>
<h3>Secure by default</h3>
<img alt="Encryption key page" src="https://www.home-assistant.io/images/blog/2025-01-backups/encrypt.png" style="border: 0;" />
<p>Backups contain all Home Assistant data, including all the keys to every integrated device in your smart home and the history of how you live your life. This data is very important to keep secure. With automatic backups and the 3-2-1 approach we are promoting to users to store their backups off-site. This is why all automatic backups are fully encrypted.</p>
<p>When a user configures automatic backups, they will be presented with the encryption key and the option to download an emergency kit. The emergency kit contains all the important information, including a link to <a href="https://www.home-assistant.io/more-info/backup-emergency-kit">the instructions on how to use it to restore a backup</a>. If you were to ever delete your emergency kit, it is available to re-download in the <a href="https://my.home-assistant.io/redirect/backup/">backup configuration page</a>.</p>
<h4>Apply 3-2-1 to your backups</h4>
<p></p>
<p>Check out the above video tutorial or read our docs to learn more about setting up <a href="https://www.home-assistant.io/integrations/backup/">automatic and off-site backups</a>.</p>
<h2>Conclusion</h2>
<p>Too often, people just starting their smart home journey move forward a little too fast and make a mistake that causes some downtime. This impacts the household’s confidence, as something that should be making their lives easier is actually seen as unreliable. Avoid this early pitfall and build a resilient smart home with 3-2-1 backups.</p>

None, I set it manually to a text of your prev post in this thread.

Well, I am unable to repro your case…
Could it be related to “<>”-like tags?
Can you post a content here in triple backticks?

dont think so because:

{{states.event.home_assistant.attributes.content|striptags}}

has no scrollbar either
Jan-03-2025 23-31-20

Anyway, post a value.

I did, in Dev tools -> Template: add scrollbars - #9 by Mariusthvdb

and it’s not Safari this time, Chrome has no vertical scrollbar either
wish I had known about this, so I could have posted in Beta

Chrome:

how odd…
let me try and refresh a couple of time again (though my cache is disabled already)

FF:

But I see another issue in FF - second scrollbar which does not appear in Chrome:


Will look into it…
No idea, it could be also old cached JS in FF which causes that extra scrollbar.
I cannot purge a cache since this is my main browser…
Will check on another PC.

Checked in FF with “private browsing” - same extra scrollbar. I thought may be that mode does not use a cache )))

1 Like

also check this in the result pane… serious overflow

Jan-03-2025 23-47-07

No, I see no such horror))))
Just in case - can you test with a default theme?

Also, do you know a way in FF to ignore a cache? Want to test in FF my extra scrollbar & do not want to purge a cache.

MS Edge - no extra scrollbar:

yes, much better…

i forgot to mention I didnt get a vertical scrollbar in the left panel either.

in default theme, left panel is showing both horizontal and vertical,

right panel now does Not overflow and produces a vertical scrollbar . No horizontal scrollbar, because the text is wrapped nicely :wink:

dont know why, because there are not many custom things in my theme, let me check

So, does it look like in my screenshots?
(with default theme ofc)

yes, seems fine
as for the theme, I believe this is the only stuff for the dev template section

    codemirror-keyword: red  #if else endif
    codemirror-operator: yellow # > < + * |
    codemirror-property: pink # is_state( , )

    codemirror-variable: '#696969'
  #  codemirror-qualifier:
    codemirror-def: orange
    codemirror-number: lightblue # {% %}
    codemirror-comment: slategray
  #  codemirror-meta:
  #  codemirror-atom:
    codemirror-string: sandybrown

so only colors, nothing else…well, and the background colors probably