How to set the width of a Client Side Extension column?

[Johannes Heger]

Hello,

I'm updating a Bitbucket add-on to Bitbucket 8 and I'm using Client Side Extensions CSE the first time. I need a custom-column in pull-requests and can achieve this with the following code:

import {ButtonExtension} from '@atlassian/clientside-extensions';

/**
* @clientside-extension
* @extension-point bitbucket.ui.pullrequest.commits.table.column.after
*/
export default ButtonExtension.factory((pluginApi, context) => {
    // Visiblity depends per row, but for demo is always disabled.
    const isHidden = true;

    return {
        hidden: isHidden,
        header: 'My Header',
        iconBefore: 'page',
        label: 'My Label',
        className: 'my-class',
        onAction: () => {
        },
    };
});

This works, but the column is unexpectedly wide, it has a (implicit) width of 320px. I like to have the width set to 80px. Until now I haven't found any way to configure this statically in the CSE code or any CSS.

More background:

CSE renders the column always, but only if isHidden is false a DIV inside the TD is created. The className is set only to that DIV, but not for the empty TD nor the header TH, so creating a CSS like the following doesn't work:

/* Doesn't work: */
.my-class {
    width: 80px;
}

I can use a MutationObserver, but this results in a flicker.

My questions are:

1. How to set the width of a CSE-column statically?
2. Ans aside from that: Can I hide/show the CSE-column itself dynamically?

Kind regards,

Jo

[Christian Glockner]

Hi Johannes,

Considering the nature of your question you may find someone who can help in our Developer Community at https://community.developer.atlassian.com/.

Cheers,

Christian

Premier Support Engineer

Atlassian

[Johannes Heger]

Christian, thanks. I filed this questions again at https://community.developer.atlassian.com/t/how-to-set-the-width-of-a-client-side-extension-column/59951.