Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

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

Johannes Heger July 17, 2022

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

1 answer

0 votes
Christian Glockner
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
July 17, 2022

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

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events