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

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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

Coloured fields - how to make the colours shorter using CSS? Flex-wrap is taking up too much space

Hi all,

I've created the following custom panel using Scriptrunner and CSS, but as you will see the colour bars are taking up too much space. How can I reduce the length of the colour bars?

Here's the code:

writer.write("<script>var css = '#customfield_13802-val { color: white; font-weight: bold; background: red; border-radius: 5px; display: flex; justify-content: center; flex-wrap: wrap; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style');head.appendChild(style);style.appendChild(document.createTextNode(css)); </script>")

 

Risk Rating.PNG

1 answer

1 accepted

0 votes
Answer accepted

Hi Mark, what happens if you add "Width: 50px" to your CSS string?

Hi Craig, thanks for your reply.

With a bit of trial and error using Width and Padding, the bars are taking up less space, thanks. The code so far is this:

writer.write("<script>var css = '#customfield_11000-val { color: white; font-weight: bold; background: red; border-radius: 5px; display: flex; flex-wrap: wrap; padding: 1px 25px 1px 25px; Width: 260px; }', head = document.head || document.getElementsByTagName('head')[0], style = document.createElement('style');head.appendChild(style);style.appendChild(document.createTextNode(css)); </script>") 

The words are not as nicely centered as in your risk register add-on, however. Also, I was hoping that the panels would shrink with the bars, but the empty space remains.

I've just learnt that panel customisation is not (yet) possible in Jira Cloud which everyone will need to migrate to, so I suppose it is not worth improving this any further.

Thank you for your help.

Capture.PNG

Suggest an answer

Log in or Sign up to answer
DEPLOYMENT TYPE
CLOUD
PRODUCT PLAN
STANDARD
PERMISSIONS LEVEL
Site Admin
TAGS
Community showcase
Posted in Jira Software

Presenting the "Best of 2020" Jira Software roundup!

Catch up with Atlassian Product Managers in our 2020 Demo Den round-up! From Advanced Roadmaps to Code in Jira to Next-Gen Workflows, check out the videos below to help up-level your work in the new ...

7,121 views 8 28
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