It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Show component inline with backlog

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


Screen Shot 2018-06-06 at 12.40.55 PM.pngScreen Shot 2018-06-06 at 12.42.41 PM.png

Screen Shot 2018-06-06 at 12.44.33 PM.png

3 answers

3 votes
Deleted user Jun 07, 2018

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

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" 

Like # people like this
1 vote
Tarun Sapra Community Leader Sep 17, 2018

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

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

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

Like Eric Wyman likes this

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

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

Like Eric Wyman likes this

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted in Jira

Demo Den Ep. 7: New Jira Cloud Reports

Learn how to use two new reports for next-gen projects in Jira Cloud:  Cumulative flow diagram and Sprint burndown chart. Ivan Teong, Product Manager, Jira Software, demos the Cumulative ...

335 views 1 3
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you