# Nable to get the height and width of the panel

**URL:** <https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616>\
**Category:** Photoshop\
**Created:** [March 4, 2021, 10:31am UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616 "2021-03-04T10:31:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![MrL](https://avatars.discourse-cdn.com/v4/letter/m/b487fb/32.png) [@MrL](https://forums.creativeclouddeveloper.com/u/MrL)\
**Post date:** [March 4, 2021, 10:31am UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616/1 "2021-03-04T10:31:59Z")

</div>

This is my code, it doesn’t work because it can’t get the panel height

```
var panel = document.getElementById("panel");
panel.style.height = window.innerHeight + "px";
```

---

<div class="post-metadata">

**Author:** ![MrL](https://avatars.discourse-cdn.com/v4/letter/m/b487fb/32.png) [@MrL](https://forums.creativeclouddeveloper.com/u/MrL)\
**Post date:** [March 4, 2021, 12:01pm UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616/2 "2021-03-04T12:01:43Z")

</div>

I want to monitor the scrollbar when the panel size changes

```
window.addEventListener("resize", function (e) {
    var panel = document.getElementById("panel");
    panel.style.height = window.innerHeight + "px";
}
```

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [March 4, 2021, 12:05pm UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616/3 "2021-03-04T12:05:45Z")

</div>

You could try to listen for the resize event on your outer container, instead of on the window.  
In theory, the resize event should fire for each element once it’s rendered by UXP, as Kerri explained [here](http://forums.creativeclouddeveloper.com/t/is-it-possible-to-customize-the-scrollbar/2447/12)

---

<div class="post-metadata">

**Author:** ![Pierre\_G](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pierre_g/32/971_2.png) [@Pierre\_G](https://forums.creativeclouddeveloper.com/u/Pierre_G)\
**Post date:** [March 4, 2021, 12:11pm UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616/4 "2021-03-04T12:11:45Z")

</div>

Maybe have a read here :  
http://forums.creativeclouddeveloper.com/t/plugin-scroll-bars/2186/2

A couple of lines in CSS and HTML and you should be good to go.

---

<div class="post-metadata">

**Author:** ![MrL](https://avatars.discourse-cdn.com/v4/letter/m/b487fb/32.png) [@MrL](https://forums.creativeclouddeveloper.com/u/MrL)\
**Post date:** [March 4, 2021, 12:28pm UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616/5 "2021-03-04T12:28:32Z")

</div>

I’ve tried that method, but it will make the scroll bar display all the time. This is not what I want. I want the panel to have no scroll bar at the beginning, but when the panel size becomes smaller, the scroll bar will be generated due to content overflow. So for me, the biggest problem is that I can’t get the height of the panel. Do you know how to get the height of the panel?

---

<div class="post-metadata">

**Author:** ![Pierre\_G](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pierre_g/32/971_2.png) [@Pierre\_G](https://forums.creativeclouddeveloper.com/u/Pierre_G)\
**Post date:** [March 4, 2021, 12:43pm UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616/6 "2021-03-04T12:43:34Z")

</div>

You have to adjust some parameters in your manifest. Scrollbar will show only if the panel height get smaller than what you set in the manifest.

---

<div class="post-metadata">

**Author:** ![MrL](https://avatars.discourse-cdn.com/v4/letter/m/b487fb/32.png) [@MrL](https://forums.creativeclouddeveloper.com/u/MrL)\
**Post date:** [March 4, 2021, 12:45pm UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616/7 "2021-03-04T12:45:08Z")

</div>

Thank you very much.

It really works because I added padding attribute to make the scroll bar always show. When the padding attribute is removed, it hides the scroll bar. That’s exactly what I need.

```
body {

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  // padding: 12px;

  color: #fff;

  width: 100%;

  height:100%;

  overflow-y: scroll;

}
```

---

<div class="post-metadata">

**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\
**Post date:** [March 4, 2021, 2:44pm UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616/8 "2021-03-04T14:44:54Z")

</div>

I’m a bit confused, don’t you just need to set

```
height: 100%
overflow-y:auto

```

on the parent container? You don’t need to read out any height information, [overflow auto](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) automatically hides or shows the scroll bar based on the available space:

> If content fits inside the padding box, it looks the same as `visible` , but still establishes a new block formatting context. Desktop browsers provide scrollbars if content overflows.

But maybe I didn’t understand your use case correctly.

---

<div class="post-metadata">

**Author:** ![MrL](https://avatars.discourse-cdn.com/v4/letter/m/b487fb/32.png) [@MrL](https://forums.creativeclouddeveloper.com/u/MrL)\
**Post date:** [March 4, 2021, 3:02pm UTC](https://forums.creativeclouddeveloper.com/t/nable-to-get-the-height-and-width-of-the-panel/2616/9 "2021-03-04T15:02:13Z")

</div>

Your code is correct. Before, I added padding attribute to make an error. Now I have fixed it.