Show component inline with backlog

[Abe]

Hi all, 

I cant figure out how to get the "component" to show inline in my backlog.

The component is created, I went to edit the board layout. I can get the "component" to show if I do a "card layout", but it puts the component on the second line. i don't want that.

I want it to show up like a label so visually its easier to sort items by "component" as I drag and drop items in the backlog. Like the last image where the "epic" is highlighted

[Deleted user]

Hi @Abe,

Go to the the Board Settings > Card layout > Under the Backlog Section add the Components field. Go back to your board and you should see Components on your issues in the Backlog view.

Hope this helps

[Abe]

Hi Danny, 

I had already done that as the picture showed above but as stated it drops it onto a second line, whereas I am trying to get it to look like a label like the Epic called "Login" 

[Amesh]

Would also like to see this inline... 4 years later.

[Dan Dumont]

This works for me, ymmv:

.ghx-issue-compact .ghx-end.ghx-estimate {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.ghx-issue-compact .ghx-end.ghx-estimate > .ghx-avatar-img {
line-height: initial;
margin-top: 0 !important;
font-size: initial;
}
.ghx-agile .aui-label.ghx-label {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin: 0 5px;
}
.ghx-issue-compact .ghx-row:first-child {
margin: 0 !important;
display: flex !important;
align-items: center !important;
flex-grow: 1 !important;
}
.ghx-issue-compact .ghx-row-version-epic-subtasks {
padding: 0 !important;
position: static !important;
order: 3 !important;
display: flex !important;
align-items: center !important;
}
.ghx-issue-content {
display: flex;
padding: 3px 5px !important;
align-items: center;
}
.ghx-issue-compact .ghx-type img {
display: static !important;
vertical-align: initial !important;
}
.ghx-issue-compact .ghx-plan-extra-fields {
margin: 0 !important;
}

 (I use https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld)

[Dan Dumont]

You guys at Atlassian give up a bit too easy sometimes.   Low votes doesn't mean you can't spend an hour on some CSS improvements. :-/

[Eric Wyman]

@Dan Dumont Did you get this working? Only on the browser side not for all users?

[Dan Dumont]

Browser only, using a chrome extension that lets me inject custom css.

[Dan Dumont]

There may be a place to dump css overrides on the page, I don't have access to admin my instance.

[Tarun Sapra]

Hello @Abe

I was looking into implementing this behaviour this morning, but it seems it's not possible and due to low votes Atlassian has turned down this request

https://jira.atlassian.com/browse/JSWSERVER-14722

[Nick Fifield]

terrible support

[Stephen Bulsara]

For anyone arriving at this question in 2023, the below works for me with a CSS browser extension:

.ghx-issue-content {
display: flex !important;
justify-content: space-between;
}

.ghx-row.ghx-end.ghx-items-container {
display: flex !important;
position: initial !important;
order: 3;
height: auto;
}

.ghx-extra-field {
background-color: var(--ds-background-accent-green-bolder,#00875a);
border: 1px solid var(--ds-border, #00875a);
color: var(--ds-text-inverse,#fff);
border-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
display: inline-block;
margin: 0;
padding: 2px 5px;
text-align: center;
text-decoration: none;
Font-size: 14px;
line-height: 14px;
Font-weight: Normal;
text-transform: none;
}

.ghx-fa {
background: var(--ds-background-selected, #ccc);
border: 1px solid var(--ds-border, #ccc);
color: var(--ds-text, #333);
}

.ghx-row.ghx-plan-main-fields {
flex-grow: 2;
}

This turns the components into a similar design as Epics. Without some custom JS there is no way to colour code them so have made them a single colour for now