[JENKINS-66933] Build with parameter display issues

[timja]

Build with parameters is showing "parameter_name" and defined "parameter_values" in different lines. It was displaying both in the same-line in some previous Jenkins build. Is there any way to fix this?

Please refer to the screenshot for the reference.

---

Originally reported by kumar311, imported from: Build with parameter display issues

• status: Open
• priority: Major
• resolution: Unresolved
• imported: 2022/01/10

[timja]

kon:

This issue was filed on the build-with-parameters-plugin component. Are you using the Build With Parameters plugin; which version?

If you are instead using the build parameters screen in the Jenkins core, then I think this was a deliberate change in JENKINS-56109 to make Jenkins easier to use with mobile devices.

[timja]

JIRAUSER135290:

kon Thanks for the reply. I wrongly tagged build-with-parameter-plugin component.

But you have exactly replied on my concern for build parameters screen in Jenkins core. Developers should have maintained/created a separate UI for mobile devices or they should have given an option to enable/disable mobile devices UI screen. 

 

[timja]

kon:

Does the new layout cause a problem? It was quite a complex change, involving many plugins, and I don't think it will be reverted without a good reason.

[timja]

JIRAUSER135290:

kon As i have many parameters, so page looks very lengthy and ugly. Same parameters were looking very neat and clean in previous versions using Laptop/other devices.  Please refer to attached "Shouldbe-like-this.png" image.

I am sure many users would have also faced this but didn't raised a concern as there were unaware of this change.

[timja]

JIRAUSER135290:

kon At-least i expect a workaround to make the view working as it was working before.

[timja]

kon:

The change affected many pages in the Jenkins UI. Is the build parameters page the only one where it is a problem for you?

Just wondering if it would be possible to make a targeted CSS change that would not require retesting all other pages as well.

[timja]

kon:

I imagine one could first modify ParametersDefinitionProperty/config-details.jelly to make it add a div element with a unique class around the whole thing, then use the Simple Theme plugin to prototype a CSS stylesheet that makes the parameters display as a table, and finally publish the stylesheet in a new plugin for easy deployment. That would have low risk because:

• The change to the Jenkins core would be small.
• JavaScript code that manipulates the DOM would not see much difference.
• The stylesheet would only affect the Build with Parameters page.
• The stylesheet would be easy to uninstall if it causes any problem.

However, I am not sure a stylesheet like that is feasible with the element structure of the generated HTML. Are there elements that can be mapped to display: table-cell and suchlike?

[timja]

JIRAUSER135290:

When we will have update on this?

[timja]

JIRAUSER135290:

Also, shall we tag this to https://issues.jenkins.io/browse/JENKINS-56109 or re-open https://issues.jenkins.io/browse/JENKINS-56109 ?

[timja]

kon:

kumar311, have you attempted to create the stylesheet?

[timja]

JIRAUSER135290:

kon If something can be done using the Jenkins UI, please let me know. Otherwise the suggested changes required Jenkins code expertise and some other person shall attempt that. Or may be developers from https://issues.jenkins.io/browse/JENKINS-56109 ?

[timja]

kon:

This stylesheet does something like that:

form[action="build?delay=0sec"] > div.parameters {
 display: table; 
}

form[action="build?delay=0sec"] > div.parameters > div.tr {
  display: table-row;
}

form[action="build?delay=0sec"] > div.parameters > div.tr > div {
  display: table-cell;
}

How did you want div.validation-error-area and div.setting-description to be displayed? Shouldbe-like-this.png does not include those.

[timja]

JIRAUSER135290:

kon How i can apply the given CSS ?

Have uploaded Shouldne-like-this1.png . Please check if thats helpful

[timja]

kon:

kumar311, I believe you can add custom CSS to the Jenkins controller via the Simple Theme plugin, but I haven't tried that myself.

[timja]

JIRAUSER135290:

kon Please see attached screenshot for another issue after applying CSS workaround. text_box_with_boolean_flag.png is without workaround and text_box_with_boolean_flag_afterCSS_workaround.png is after applying the workaround. Text box is in extreme right.

[timja]

kon:

kumar311 I don't intend to work further on the stylesheet. If you need help editing it, I suggest you post the parameter definitions and the generated HTML so that others can reproduce your issue.

[timja]

JIRAUSER135290:

kon Sorry i missed your reply and was on vacation. But this is the simplest thing, which i believed someone would have already recreated. 

Here is the details-

select following parameters in freestyle job:

**1. String parameter (also add description)

2. Add boolean parameter (also add description)

Please refer to attached screenshot parameters_details.png

 

HTML Output screenshot: build_with_parameters_html_output.png

PROBLEM: Please see the output of "build_with_parameters_html_output.png", how text was wrongly rendered, and notice the text box for string_parameter.

 

NOTE: this output you will see with your workaround.

[timja]

JIRAUSER135290:

kon Please let me know in-case you are not able to recreate this.

[timja]

JIRAUSER135290:

kon Hi, Did you get a chance to give it a try?