How to change the width of the custom field in JIRA?

[Sridevi]

I have created a Single select custom field and able to modify the width of the label by writing code in the description of the field. But the issue is, when i try to change the options from the single select drop down again the label width going back to normal position and refresh is required to change the width again. 

Is it possible to make the width of the label static when there is change in options?

[Nir Haimov · Accepted solution]

you just need to call your function again whenever you are doing a change to the single select value.

something like:

$("#customfield_12345").change(function() {
  changeWidth();
})

[Sridevi]

Hi Nir,

Thanks for your reply.

I have written code in the description of the JIRA custom field, code is not external to call the function.

• Custom Field Width Less than Available Options Length

Followed workaround 2 in the above link.

So, there is no function to call when there is change in options. I have written java script in the description of the custom field.

Thanks,

Sridevi.

[Nir Haimov]

Ok, it's the same... so your code will be something like:

$("#customfield_12345").change(function() {
  label.setAttribute("style","width: auto");
  label.setAttribute("size", "8");
})

 "label" represent your label, of course you have to get it by something like:

var label = document.getElement....

[Sridevi]

Below is my code.

<script type="text/javascript">
var labels = document.getElementsByClassName('name');
var maxWidth= 400;
var LabelID = 'Is the requiremrent consistent with no conflicts or contradictions in logic or terminology?';
for (var i = 0; i < labels.length; i++)
if (labels[i].title == LabelID ) {
labels[i].style.width=maxWidth + "px";
break;
}
</script>

and it is working as expected. As mentioned before, it is working as expected till i change the options of select field. When i am trying to change the select option then label width is back to normal width.

[Nir Haimov]

where are you click on the field to change it value?

from edit screen? inline edit? or other?

[Sridevi]

Below is the screenshot of the view screen after applying the code. Width modified as expected. Value - Yes

Below is the screen when i want to change the value and click on options

After changing the value from the drop down, see the below screenshot width is back to normal size

[Nir Haimov]

Ohh OK :)

Copy my code instead of yours and it will work like a charm:

//your label of the field
var element = 'Is the requirement consistent with no conflict or contradictions in logic or terminology?'

//make the label width bigger
$("strong:contains("+element+")").css("width", "200px")

JIRA.bind(JIRA.Events.INLINE_EDIT_SAVE_COMPLETE, function() {//catch the event of update to field
 $("strong:contains("+element+")").css("width", "200px") //inside, once update, make the label width bigger again
})

just replace the "200px" the width you want.
And it will work

Let me know how it goes

[Sridevi]

Hi Nir,

Do i need to copy the code in the description of the field in JIRA?

If so, it is not working. Else please let me know where i need to copy the code?

Thanks,

Sridevi.

[Nir Haimov]

Yeah,

You need to copy it to the field description (inside "script" tag of course)

You tried and it did not work? :-O

[Nir Haimov]

If it's not working and your code does work (partially),

lets try it with your code:

<script type="text/javascript">
  //this is your code
  var labels = document.getElementsByClassName('name');
  var maxWidth= 400;
  var LabelID = 'Is the requiremrent consistent with no conflicts or contradictions in logic or terminology?';
  
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].title == LabelID ) {
      labels[i].style.width=maxWidth + "px";
      break;
    }
  }

  //just add this part, the JIRA.bind is what you need, inside it put your code again
  JIRA.bind(JIRA.Events.INLINE_EDIT_SAVE_COMPLETE, function() {//catch the event of update to field
    for (var i = 0; i < labels.length; i++) {
      if (labels[i].title == LabelID ) {
        labels[i].style.width=maxWidth + "px";
        break;
      }
    }
  })
</script>

[Sridevi]

Ho great!! it is working.

Only one issue is there. When i can click on the edit of options, drop down is expanding and coming to the next line as below.

[Nir Haimov]

Get the element of the dropdown, and reduce it's width

[Sridevi]

Hi Nir,

Sorry for the late response. 

I have reduced the width and changed the position too. But if i click on edit, options drop down coming to the next line. 

[Nir Haimov]

Hi @Sridevi,

Can you send me the exact code you wrote?

[Sridevi]

Hi Nir,

Below is my code

<script type="text/javascript">
//To change the options width and position
var options = document.getElementById('customfield_21600-val');
options.style.position = "relative";
options.style.left= 250 + "px";
options.style.width= 100 + "px";

//To change the width of the label
var labels = document.getElementsByClassName('name');
var maxWidth= 400;
var LabelID = 'Is the requiremrent consistent with no conflicts or contradictions in logic or terminology?';

for (var i = 0; i < labels.length; i++) {
if (labels[i].title == LabelID ) {
labels[i].style.width=maxWidth + "px";

break;
}
}

JIRA.bind(JIRA.Events.INLINE_EDIT_SAVE_COMPLETE, function() {//catch the event of update to field
var maxWidth= 400;
var LabelID = 'Is the requiremrent consistent with no conflicts or contradictions in logic or terminology?';
for (var i = 0; i < labels.length; i++) {
if (labels[i].title == LabelID ) {
labels[i].style.width=maxWidth + "px";
break;
}
}
})
</script>

Thanks,

Sridevi.

[Nir Haimov]

Sorry,

i used your code and for me it works good.

so i don't know why it happens to you.

just try to play with the CSS for the elements

[Sridevi]

Hi Nir,

May be you have tested with single line label or short label. If it so, code works. If width of the label is as given in the code then the drop down is jumping to the next line after click on edit of the drop down.

Thanks,

Sridevi.

[Mister Kat]

Is it possible to do this in jira Cloud, not jira Server?

[Developer 1]

@Mister Kat , did you figure out if it's possible to do this in Jira Cloud?

@Nir Haimov , do you know if we can change it in Jira Cloud as well? I tried to add the JS code in the Description, but everything was ignored.

[Nir Haimov]

Hi @Developer 1 ,

This work only in Jira Server, not Cloud, as in Cloud you can't use JS

[Jeffrey Cocozziello]

Hi @Nir Haimov

I am using the code you pasted above to modify the width of some of my custom fields. For some reason the code works on most of my fields, but does not work on three of them and I cannot figure out why.

As you can see above 'qtest-statusNew' does not have its width expanded. Here is the code I used in the description field.

<script type="text/javascript">
//your label of the field
var element = "qtest-statusNew"

//make the label width bigger
$("strong:contains("+element+")").css("width", "220px")

JIRA.bind(JIRA.Events.INLINE_EDIT_SAVE_COMPLETE, function() {//catch the event of update to field
$("strong:contains("+element+")").css("width", "220px") //inside, once update, make the label width bigger again
})
</script>

I used the same code for all the other fields, but with the var element changed to the proper name of the field.

Any suggestions?

Thanks

[Ankit Rastogi]

How we can do for Jira Cloud?