How to increase the width of the watchers selection box in Jira

Still need help?

The Atlassian Community is here for you.

Ask the community

Platform notice: Server and Data Center only. This article only applies to Atlassian products on the Server and Data Center platforms.

Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.

*Except Fisheye and Crucible

The content on this page includes steps to customize or extend Atlassian software (adding/changing CSS rules, HTML, JavaScript, etc.). Per the Atlassian Support Offerings, support does not include customizations made to Atlassian products. Be aware that this material is provided for your information only and using it is done so at your risk.

If you have any questions about this or any customization, please ask the community at Atlassian Answers or consider working with an Atlassian Solution Partner.

 

Summary

The width of the suggested watcher list may sometimes not be enough to differentiate users when they're listed on multiple directories or have long and similar names.
This how to article provide an unsupported addition to the announcement banner to tweak the width of the auto-suggestion watcher picker light box that appears once you start typing.

JRASERVER-71262 - Getting issue details... STATUS

Environment

Validated in Jira 7.


Solution

Add the following code snippets to the announcement banner in Jira.

The default width for that field is 218px, so you may test values that work best for you:

<style type="text/css">
#watchers-multi-select {
    width: 260px !important;
}
</style>

Or this one, that would move the watcher selection box to the left. Note the second value should be slightly bigger than the firsts just for symmetry's sake. Again, test to reach a value that works best for you:

<style type="text/css">
#watchers-multi-select {
    width: 280px !important;
}
#inline-dialog-watchers {
    width: 300px !important;
}
</style>

The code above is unlikely to have side-effects in Jira, yet should you notice anything wrong on the user interface (UI), like scrambled layout or content not being rendered, we advice wiping out the announcement banner and testing again.



Last modified on Jul 6, 2020

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.