# How to set height & width of the mattermost plugin

**URL:** <https://forum.mattermost.com/t/how-to-set-height-width-of-the-mattermost-plugin/11103>\
**Category:** Troubleshooting\
**Created:** [January 14, 2021, 8:05pm UTC](https://forum.mattermost.com/t/how-to-set-height-width-of-the-mattermost-plugin/11103 "2021-01-14T20:05:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![trancha](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@trancha](https://forum.mattermost.com/u/trancha)\
**Post date:** [January 14, 2021, 8:05pm UTC](https://forum.mattermost.com/t/how-to-set-height-width-of-the-mattermost-plugin/11103/1 "2021-01-14T20:05:59Z")

</div>

Hi,

I made a sample plugin based on tutorial and loaded it in mattermost portal/webpage. The plugin can be opened/closed via a click from a mouse. But when it opens, its width is too big and overlaps partially the chatt message column. I want to set the max size for it but could not find a way. Any advise would be great.

Thanks,  
Charlie

---

<div class="post-metadata">

**Author:** ![XxLilBoPeepsxX](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mattermost.com/xxlilbopeepsxx/32/4993_2.png) [@XxLilBoPeepsxX](https://forum.mattermost.com/u/XxLilBoPeepsxX)\
**Post date:** [January 14, 2021, 9:26pm UTC](https://forum.mattermost.com/t/how-to-set-height-width-of-the-mattermost-plugin/11103/2 "2021-01-14T21:26:38Z")

</div>

Can I ask what tutorial you used, so I can see what method(s) you used in developing your plugin?

---

<div class="post-metadata">

**Author:** ![trancha](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@trancha](https://forum.mattermost.com/u/trancha)\
**Post date:** [January 14, 2021, 10:06pm UTC](https://forum.mattermost.com/t/how-to-set-height-width-of-the-mattermost-plugin/11103/3 "2021-01-14T22:06:34Z")

</div>

Hi, I am using the web app plugin from here: [Quick Start](https://developers.mattermost.com/extend/plugins/webapp/hello-world/)

Instead of displaying alert(), I use the registerRightHandSidebarComponent(…) to load a sample web app that is first loaded with an html page with height&width = 100%. When I click the plugin icon, the webapp is loaded as expected in the right-hand-side-bar. But the page width overlaps the chat message column/section partially. I think if I can set the width smaller, then it will look perfect. Here is the code in index.jsx:  
initialize(registry, store) {

```
    // Immediately fetch the current plugin status.
    store.dispatch(getStatus());

    const {toggleRHSPlugin} = registry.registerRightHandSidebarComponent(App,"sample plugin test app");
    registry.registerChannelHeaderButtonAction(
        // icon - JSX element to use as the button's icon
        <Icon/>,
        () => store.dispatch(toggleRHSPlugin),
        "App Plugin",
        "Open App Plugin"
    );
    
    registry.registerReducer(reducer);

    // Fetch the current status whenever we recover an internet connection.
    registry.registerReconnectHandler(() => {
        store.dispatch(getStatus());
    });
    
}

```

Do you have any advise?

Thanks,  
Charlie

Thanks,  
Charlie

---

<div class="post-metadata">

**Author:** ![trancha](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@trancha](https://forum.mattermost.com/u/trancha)\
**Post date:** [January 15, 2021, 6:55pm UTC](https://forum.mattermost.com/t/how-to-set-height-width-of-the-mattermost-plugin/11103/4 "2021-01-15T18:55:33Z")

</div>

In a different approach, I am looking for a way to set horizontal align for content lf rigth handside bar area. For ex, I will load the web plugin in that area and want to align it to the rigth?

Thanks,  
Charlie