nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Accepted answers

Craig Schwarze _ProjectBalm_

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

All comments

Craig Schwarze _ProjectBalm_

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.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

cloud

jira-software

jira-software-cloud

field

css