[JIRA] [core] (JENKINS-35269) Job configuration UI Layout is broken

Change By:	Falycia Hankinson
Attachment:	Screen Shot 2016-08-19 at 11.50.50 AM.png

This message was sent by Atlassian JIRA (v7.1.7#71011-sha1:2526d7c)

falycia1@gmail.com (JIRA)

unread,

Aug 19, 2016, 1:29:02 PM8/19/16

to jenkinsc...@googlegroups.com

Falycia Hankinson commented on

For Chrome (Version 52.0.2743.116) and Safari (Version 9.1.2) on Mac, it looks even worse

marcel@stickybit.se (JIRA)

unread,

Aug 26, 2016, 7:42:04 AM8/26/16

to jenkinsc...@googlegroups.com

Marcel Montel commented on

We got this behaviour when updating from 1.6 > 2.7.2 LTS. When configuring our freestyle jobs the tbody is stretching all over the page (the css looks like min-size 1600px)

marcel@stickybit.se (JIRA)

unread,

Aug 26, 2016, 7:42:04 AM8/26/16

to jenkinsc...@googlegroups.com

Marcel Montel updated an issue

Jenkins /

Change By:	Marcel Montel
Attachment:	Screenshot 2016-08-26 13.36.37.png

roeera@gmail.com (JIRA)

unread,

Aug 29, 2016, 4:37:02 AM8/29/16

to jenkinsc...@googlegroups.com

Roee Rakovsky commented on

Indeed same problem appear in my MAC.
Jenkins ver : 2.7.2
chrome ver : Version 52.0.2743.116 (64-bit)

Seems that problem is only when trying to configure a job.

Attach a screenshot.

roeera@gmail.com (JIRA)

unread,

Aug 29, 2016, 4:37:02 AM8/29/16

to jenkinsc...@googlegroups.com

Roee Rakovsky updated an issue

Jenkins /

Change By:	Roee Rakovsky
Attachment:	jenkins_ui_problem.png

dbeck@cloudbees.com (JIRA)

unread,

Aug 29, 2016, 7:30:03 AM8/29/16

to jenkinsc...@googlegroups.com

Daniel Beck commented on

Roee Rakovsky Could you confirm there is a multiline text area in the form that stretches over the entire width due to long text lines that don't wrap? Or anything else notable as possible cause?

roeera@gmail.com (JIRA)

unread,

Aug 29, 2016, 8:20:02 AM8/29/16

to jenkinsc...@googlegroups.com

Roee Rakovsky commented on

Daniel Beck Agree - Under build there is a Execute shell box that holds long text that don't wrap.
BTW when opening the same page in safari everything is looking good.

roeera@gmail.com (JIRA)

unread,

Aug 29, 2016, 8:21:05 AM8/29/16

to jenkinsc...@googlegroups.com

Roee Rakovsky edited a comment on

[~danielbeck] Agree - Under build there is a an Execute shell box that holds long text that don't wrap.

BTW when opening the same page in safari everything is looking good.

marcel@stickybit.se (JIRA)

unread,

Aug 29, 2016, 12:59:01 PM8/29/16

to jenkinsc...@googlegroups.com

Marcel Montel commented on

Roee Rakovsky I am experiencing the exact same behaviour in Safari (MAC Version 9.0.1 (11601.2.7.2) as chrome/firefox

roeera@gmail.com (JIRA)

unread,

Aug 30, 2016, 4:01:02 AM8/30/16

to jenkinsc...@googlegroups.com

Roee Rakovsky commented on

Marcel Montel Daniel BeckTaking my words back - same problem is also in Safari

roeera@gmail.com (JIRA)

unread,

Sep 4, 2016, 8:57:02 AM9/4/16

to jenkinsc...@googlegroups.com

Roee Rakovsky commented on

Daniel Beck gus reiber any update related the above bug ?

Many thanks,
Roee.

valeriefdes@gmail.com (JIRA)

unread,

Sep 5, 2016, 6:25:04 AM9/5/16

to jenkinsc...@googlegroups.com

Valerie Fernandes commented on

Similar issue while enabling project based security. It drags the entire UI horizontally to the right on chrome and Firefox but not IE.
In addition i also noticed that if the screen size is large with a resolution of 1920*1080, I do not face this issue on any browser.

roeera@gmail.com (JIRA)

unread,

Sep 14, 2016, 7:08:03 AM9/14/16

to jenkinsc...@googlegroups.com

Roee Rakovsky commented on

Daniel Beck gus reiber
Hi Friends,

Is there any idea when this bug is going to be fixed ?

marcel@stickybit.se (JIRA)

unread,

Sep 26, 2016, 7:41:02 AM9/26/16

to jenkinsc...@googlegroups.com

Marcel Montel commented on

Both duplicate issues seems to be resolved, has this been resolved now?

fun4jimmy@gmail.com (JIRA)

unread,

Sep 26, 2016, 7:47:02 AM9/26/16

to jenkinsc...@googlegroups.com

James Whitworth commented on

The duplicate issues were just resolved as being duplicates, I don't think any fixes went in for them.

greiber@cloudbees.com (JIRA)

unread,

Sep 26, 2016, 5:30:02 PM9/26/16

to jenkinsc...@googlegroups.com

gus reiber assigned an issue to Unassigned

Jenkins /

Change By:	gus reiber
Assignee:	gus reiber

greiber@cloudbees.com (JIRA)

unread,

Sep 26, 2016, 5:39:04 PM9/26/16

to jenkinsc...@googlegroups.com

gus reiber commented on

Manuel Recena Soto Can you help me take a look at this. As Daniel Beck describes, the easiest repro is to add a really long text string into the a description input box (or a script field):

I have been using this as my quick test: http://sa-cje-test-1-642-4-1-11.jenkins.beedemo.net/job/pipeline-examples/job/beedemo/job/apple-swift-on-linux/job/master/configure

Add this string to the description:

 
                                                                        asdf asdf asdfasdfasdf asdfasf alsfk 'adklsf';lasfk alsfk fka'fkl afkla'fkla'fkl 'asdfkl as'fkla'sfkla'sfkla'sfkla'fk'afk

see the form content spill out of the display box

I am not able to find any CSS to apply to the parent table cell or any of the parent elements wrapping that textarea (which isn't really a textarea at all, but some 'codemirror' component). Anyway, if you can take a look, I would appreciate it.

greiber@cloudbees.com (JIRA)

unread,

Sep 26, 2016, 5:39:04 PM9/26/16

to jenkinsc...@googlegroups.com

gus reiber assigned an issue to gus reiber

Jenkins /

Change By:	gus reiber
Assignee:	gus reiber

greiber@cloudbees.com (JIRA)

unread,

Sep 26, 2016, 5:40:02 PM9/26/16

to jenkinsc...@googlegroups.com

gus reiber assigned an issue to Manuel Adan

Jenkins /

Change By:	gus reiber
Assignee:	gus reiber Manuel Adan

greiber@cloudbees.com (JIRA)

unread,

Sep 26, 2016, 5:40:03 PM9/26/16

to jenkinsc...@googlegroups.com

gus reiber assigned an issue to Manuel Recena Soto

Jenkins /

Change By:	gus reiber
Assignee:	Manuel Adan Recena Soto

greiber@cloudbees.com (JIRA)

unread,

Sep 30, 2016, 4:22:05 PM9/30/16

to jenkinsc...@googlegroups.com

gus reiber commented on

Manuel Recena Soto As far as I can tell, there are only 3 uncomfortable paths forward:

refactor the config form to get out of tables, which was the original plan
choose a new look for the page in which the exploding column width isn't visually obvious
dig into the CodeMirror component and figure out why it pushes its dom element wider.

My hope would be that there is some silver bullet/CSS fix that is escaping me, which is where I am looking for a second set of eyes.

If there isn't such a fix and I am right about the 3 options above, it seems to me that some discussion and choices are needed. I don't think it makes sense for me to go stab at either of these 3 options alone. Maybe Daniel Beck can offer guidance.

dbeck@cloudbees.com (JIRA)

unread,

Sep 30, 2016, 8:04:02 PM9/30/16

to jenkinsc...@googlegroups.com

Daniel Beck commented on

gus reiber What about the CSS changes mentioned in comments to JENKINS-16327, JENKINS-27367 or JENKINS-35263? Do they not solve the problem?

greiber@cloudbees.com (JIRA)

unread,

Oct 3, 2016, 12:24:03 PM10/3/16

to jenkinsc...@googlegroups.com

gus reiber commented on

https://github.com/jenkinsci/jenkins/pull/2574
yup, 27367 is the silver bullet I was not finding.

greiber@cloudbees.com (JIRA)

unread,

Oct 3, 2016, 12:24:05 PM10/3/16

to jenkinsc...@googlegroups.com

gus reiber started work on

Change By:	gus reiber
Status:	Open In Progress

greiber@cloudbees.com (JIRA)

unread,

Oct 3, 2016, 12:24:06 PM10/3/16

to jenkinsc...@googlegroups.com

gus reiber updated

Jenkins /

Change By:	gus reiber
Status:	In Progress Review

o.v.nenashev@gmail.com (JIRA)

unread,

Mar 12, 2017, 8:29:04 AM3/12/17

to jenkinsc...@googlegroups.com

Oleg Nenashev updated

Jenkins /

Change By:	Oleg Nenashev
Status:	In Review Progress

This message was sent by Atlassian JIRA (v7.3.0#73011-sha1:3c73d0e)

o.v.nenashev@gmail.com (JIRA)

unread,

Mar 12, 2017, 8:30:04 AM3/12/17

to jenkinsc...@googlegroups.com

Oleg Nenashev commented on

The PR from gus reiber has been closed
Manuel Recena Soto, could you please clarify the issue status?

ataylor@cloudbees.com (JIRA)

unread,

Apr 17, 2018, 3:47:02 PM4/17/18

to jenkinsc...@googlegroups.com

Alex Taylor commented on

Manuel Recena Soto Any ideas on the future PRs for this issue?

recena@gmail.com (JIRA)

unread,

Jul 29, 2018, 6:20:02 AM7/29/18

to jenkinsc...@googlegroups.com

Manuel Recena Soto commented on

Alex Taylor I could take a look. Did you reproduce it recently?

This message was sent by Atlassian JIRA (v7.10.1#710002-sha1:6efc396)

dbeck@cloudbees.com (JIRA)

unread,

Jul 29, 2018, 7:25:03 AM7/29/18

to jenkinsc...@googlegroups.com

Daniel Beck commented on

For 'Execute Shell' becoming too wide at least, this was fixed between 2.19.3 and 2.32.3.

Matrix Auth Plugin was another easy way to go too wide, but I fixed the lack of header row rotation in Chrome in matrix-auth 2.3, so that should also be a rather rare occurrence.

Can't think of other easy ways to make things go too wide without jumping through hoops. Can anyone recommend a plugin?

ataylor@cloudbees.com (JIRA)

unread,

Jul 30, 2018, 8:13:03 AM7/30/18

to jenkinsc...@googlegroups.com

Alex Taylor commented on

Manuel Recena Soto It looks like TFS has been fixed and the only other one I am seeing it with is https://wiki.jenkins.io/display/JENKINS/CVS+Plugin but very few people use that plugin.

It seems to happen most when configuring a pipeline job with a SCM that was not designed to fit into the pipeline spacing and instead on a freestyle spacing

alexhraber@gmail.com (JIRA)

unread,

Mar 3, 2020, 7:18:04 PM3/3/20

to jenkinsc...@googlegroups.com

Alex Raber updated an issue

Jenkins /

Change By:	Alex Raber
Attachment:	Screen Shot 2020-03-03 at 4.17.00 PM.png

This message was sent by Atlassian Jira (v7.13.12#713012-sha1:6e07c38)

alexhraber@gmail.com (JIRA)

unread,

Mar 3, 2020, 7:19:03 PM3/3/20

to jenkinsc...@googlegroups.com

Alex Raber updated an issue

Jenkins /

Change By:	Alex Raber
Attachment:	Screen Shot 2020-03-03 at 4.16.26 PM.png

alexhraber@gmail.com (JIRA)

unread,

Mar 3, 2020, 7:27:03 PM3/3/20

to jenkinsc...@googlegroups.com

Alex Raber updated an issue

Jenkins /

Change By:	Alex Raber
Attachment:	Screen Shot 2020-03-03 at 4.26.02 PM.png

alexhraber@gmail.com (JIRA)

unread,

Mar 3, 2020, 7:28:05 PM3/3/20

to jenkinsc...@googlegroups.com

Alex Raber updated an issue

Jenkins /

Change By:	Alex Raber
Attachment:	Screen Shot 2020-03-03 at 4.26.18 PM.png

alexhraber@gmail.com (JIRA)

unread,

Mar 3, 2020, 7:34:06 PM3/3/20

to jenkinsc...@googlegroups.com

Alex Raber commented on

I'm replying to gain traction on this. I have 2 jenkins deployments with the exact same css theme and the exact same job.

On one deployment, everything looks normal (albeit very narrow):

On the second deployment, text and code are set to the right, escaping the narrow job config view:

As you can see in the screenshots above, the text/code fields are escaping the config editor table.

Upon closer inspection the `config-table scrollspy` table is breaking out of the config form when it's being rendered.

As you can see in the first screenshot below, there is a green rectangle on the right of the blue box – that is where the edge of the form is – in the second screenshot you can faintly see the gray on the left half of the page with a darker grey vertical line in the middle of the page representing that same edge of the form. The table breaks out on one jenkins, but an identical config/deployment/job looks normal:

alexhraber@gmail.com (JIRA)

unread,

Mar 3, 2020, 7:39:03 PM3/3/20

to jenkinsc...@googlegroups.com

Alex Raber edited a comment on

I'm replying to gain traction on this. I have 2 jenkins deployments with the exact same css theme and the exact same job.

On one deployment, everything looks _normal_ (albeit very narrow):

!Screen Shot 2020-03-03 at 4.17.00 PM.png|width=670,height=400!

On the second deployment, text and code are set to the right, escaping the narrow job config view:

!Screen Shot 2020-03-03 at 4.16.26 PM.png|width=667,height=400!

As you can see in the screenshots above, the text/code fields are escaping the config editor table.

Upon closer inspection the `config-table scrollspy` table is breaking out of the config form when it's being rendered.

As you can see in the first screenshot below, there is a green rectangle on the right of the blue box – that is where the edge of the form is – in the second screenshot you can faintly see the gray on the left half of the page with a darker grey vertical line in the middle of the page representing that same edge of the form. The table breaks out on one jenkins, but an identical config/deployment/job looks normal:

!Screen Shot 2020-03-03 at 4.26.02 PM.png|width=774,height=400!

!Screen Shot 2020-03-03 at 4.26.18 PM.png|width=812,height=400!

Edit: I'm not going to include screenshots on this part – if you scale down to 90% in chrome, the issue goes away.

alexhraber@gmail.com (JIRA)

unread,

Mar 3, 2020, 7:41:02 PM3/3/20

to jenkinsc...@googlegroups.com

Alex Raber edited a comment on

I'm replying to gain traction on this. I have 2 jenkins deployments with the exact same css theme and the exact same job.

On one deployment, everything looks _normal_ (albeit very narrow):

!Screen Shot 2020-03-03 at 4.17.00 PM.png|width=670,height=400!

On the second deployment, text and code are set to the right, escaping the narrow job config view form :

!Screen Shot 2020-03-03 at 4.16.26 PM.png|width=667,height=400!

As you can see in the screenshots above, the text/code fields are escaping the config editor table form .

Upon closer inspection the `config-table scrollspy` table is breaking out of the config form when it's being rendered.

As you can see in the first screenshot below, there is a green rectangle on the right of the blue box – that is where the edge of the form is – in the second screenshot you can faintly see the gray on the left half of the page with a darker grey vertical line in the middle of the page representing that same edge of the form. The table breaks out on one jenkins, but an identical config/deployment/job looks normal:

!Screen Shot 2020-03-03 at 4.26.02 PM.png|width=774,height=400!

!Screen Shot 2020-03-03 at 4.26.18 PM.png|width=812,height=400!

Edit: I'm not going to include screenshots on this part – if you scale down to 90% in chrome, the issue goes away.

alexhraber@gmail.com (JIRA)

unread,

Mar 3, 2020, 7:43:02 PM3/3/20

to jenkinsc...@googlegroups.com

Alex Raber edited a comment on

I'm replying to gain traction on this. I have 2 jenkins deployments with the exact same css theme and the exact same job.

On one deployment, everything looks _normal_ (albeit very narrow):

!Screen Shot 2020-03-03 at 4.17.00 PM.png|width=670,height=400!

On the second deployment, text and code are set to the right, escaping the narrow job config form:

!Screen Shot 2020-03-03 at 4.16.26 PM.png|width=667,height=400!

As you can see in the screenshots above, the text/code fields are escaping the config editor form.

Upon closer inspection the `config-table scrollspy` table is breaking out of the config form when it's being rendered.

As you can see in the first screenshot below, there is a green rectangle on the right of the blue box – that is where the edge of the form is – in the second screenshot you can faintly see the gray on the left half of the page with a darker grey vertical line in the middle of the page representing that same edge of the form. The table breaks out on one jenkins, but an identical config/deployment/job looks normal (as illustrated in the first screenshot above) :

!Screen Shot 2020-03-03 at 4.26.02 PM.png|width=774,height=400!

!Screen Shot 2020-03-03 at 4.26.18 PM.png|width=812,height=400!

Edit: I'm not going to include screenshots on this part – if you scale down to 90% in chrome, the issue goes away.

alexhraber@gmail.com (JIRA)

unread,

Mar 4, 2020, 1:39:11 PM3/4/20

to jenkinsc...@googlegroups.com

Edit: I'm not going to include screenshots on this part – if you scale down to 90% in chrome, the issue sometimes goes away (but apparently not, when editing Pipeline job configs via UI) .