We're Hiring!

Mattermost, Inc.

How to set height & width of the mattermost plugin

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

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.
    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

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