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

[Mark Fallaize]

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>")

[Craig Schwarze _ProjectBalm_ · Accepted solution]

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

[Mark Fallaize]

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.