-
Bug
-
Resolution: Unresolved
-
Major
-
None
-
Jenkins 2.6
-
Powered by SuggestiMate
Job configuration UI Layout is broken, some of the fields stretch horizontally and broke UI
- jenkins_ui_problem.png
- 103 kB
- layout_broken.png
- 54 kB
- is duplicated by
-
JENKINS-37305 problem with styles configure section
-
- Resolved
-
-
JENKINS-37686 Long job descriptions break the Jenkins configuration page layout
-
- Resolved
-
[JENKINS-35269] Job configuration UI Layout is broken
danielbeck I think I would disagree. Most important is to not look broken, which this does. I will see what I can figure out. Looks like this is a Maven project, yeah.... trying to get a sense for how I will reproduce this. Man would I love it if we could change Source Code Management to SCM. Did we never take Tom's fix for wrapping tabs?
gusreiber Still open, as tests are missing. I'd be happy to merge as is, but I think I'm the only one.
That said, you should be able to reproduce in any config page with formatted CodeMirror text areas, just enter a giant line and watch it grow sideways.
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)
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 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?
danielbeck Agree - Under build there is an Execute shell box that holds long text that don't wrap.
BTW when opening the same page in safari everything is looking good.
roeera I am experiencing the exact same behaviour in Safari (MAC Version 9.0.1 (11601.2.7.2) as chrome/firefox
marcelmonteldanielbeckTaking my words back - same problem is also in Safari
danielbeckgusreiber any update related the above bug ?
Many thanks,
Roee.
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.
danielbeckgusreiber
Hi Friends,
Is there any idea when this bug is going to be fixed ?
Both duplicate issues seems to be resolved, has this been resolved now?
The duplicate issues were just resolved as being duplicates, I don't think any fixes went in for them.
recena Can you help me take a look at this. As danielbeck 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.
recena 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 danielbeck can offer guidance.
gusreiber What about the CSS changes mentioned in comments to JENKINS-16327, JENKINS-27367 or JENKINS-35263? Do they not solve the problem?
https://github.com/jenkinsci/jenkins/pull/2574
yup, 27367 is the silver bullet I was not finding.
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?
recena 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
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 form:
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):
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).
I am seeing this same problem, it only seems to be an issue with older or cloned jobs. I recently setup a new Jenkins server and setup and identical job and that was ok.
The problem goes away as soon as the browser is more the 1800 pixels wide.
Actually, that's deliberate – better to only stretch the individual form fields that are too long rather than the entire page layout.
tfennelly gusreiber right?