# Dashboard 2 horizontal scrolling in bound html page

**URL:** <https://discourse.nodered.org/t/dashboard-2-horizontal-scrolling-in-bound-html-page/90577>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [31 August 2024 07:19 UTC](https://discourse.nodered.org/t/dashboard-2-horizontal-scrolling-in-bound-html-page/90577 "2024-08-31T07:19:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [31 August 2024 07:19 UTC](https://discourse.nodered.org/t/dashboard-2-horizontal-scrolling-in-bound-html-page/90577/1 "2024-08-31T07:19:20Z")

</div>

Hi I am viewing Grafana graphs on my mobile phone using templates and binding to html.  
Before migration to DB2 I set iframe width to 600 and was able to scroll horizontally. I cannot recreate this in DB2

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [31 August 2024 08:11 UTC](https://discourse.nodered.org/t/dashboard-2-horizontal-scrolling-in-bound-html-page/90577/2 "2024-08-31T08:11:45Z")

</div>

You haven't pointed out anything about what is missing for you but basics should go something like this

You need to use the ui\_template node to create the iframe and then you style it as you need. And then make the div containig that iframe to have scroll in x-direction.

```auto
<template>       
    <iframe class="x-scrollable" src="your-content-source" ></iframe>
</template>

<style>
    
    .x-scrollable{
        width:800px;
        /*definitely should have more styles for the iframe*/        
    }
    div:has(> .x-scrollable){
        overflow-x:scroll;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![muggins](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/muggins/32/63013_2.png) [@muggins](https://discourse.nodered.org/u/muggins)\
**Post date:** [31 August 2024 09:10 UTC](https://discourse.nodered.org/t/dashboard-2-horizontal-scrolling-in-bound-html-page/90577/3 "2024-08-31T09:10:44Z")

</div>

> [@hotNipi](#):
>
> `class="x-scrollable"`

That works perfectly... thanks

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [30 September 2024 09:11 UTC](https://discourse.nodered.org/t/dashboard-2-horizontal-scrolling-in-bound-html-page/90577/4 "2024-09-30T09:11:43Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.