We're Hiring!

Mattermost, Inc.

How to set height & width of the mattermost plugin


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.


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

Hi, I am using the web app plugin from here: Quick Start

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.

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

    // Fetch the current status whenever we recover an internet connection.
    registry.registerReconnectHandler(() => {

Do you have any advise?



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?