• Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Major Major
    • core
    • None
    • Jenkins 2.6

      Job configuration UI Layout is broken, some of the fields stretch horizontally and broke UI

          [JENKINS-35269] Job configuration UI Layout is broken

          Daniel Beck added a comment -

          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?

          Daniel Beck added a comment - 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?

          gus reiber added a comment -

          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?

          gus reiber added a comment - 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?

          Daniel Beck added a comment -

          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.

          Daniel Beck added a comment - 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.

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

          Falycia Hankinson added a comment - For Chrome (Version 52.0.2743.116) and Safari (Version 9.1.2) on Mac, it looks even worse

          Marcel Montel added a comment -

          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 Montel added a comment - 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)

          Roee Rakovsky added a comment -

          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.

          Roee Rakovsky added a comment - 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.

          Daniel Beck added a comment -

          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?

          Daniel Beck added a comment - 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?

          Roee Rakovsky added a comment - - edited

          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.

          Roee Rakovsky added a comment - - edited 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.

          Marcel Montel added a comment -

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

          Marcel Montel added a comment - roeera I am experiencing the exact same behaviour in Safari (MAC Version 9.0.1 (11601.2.7.2) as chrome/firefox

          Roee Rakovsky added a comment -

          marcelmonteldanielbeckTaking my words back - same problem is also in Safari

          Roee Rakovsky added a comment - marcelmontel danielbeck Taking my words back - same problem is also in Safari

          Roee Rakovsky added a comment -

          danielbeckgusreiber any update related the above bug ?

          Many thanks,
          Roee.

          Roee Rakovsky added a comment - danielbeck gusreiber 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.

          Valerie Fernandes added a comment - 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.

          Roee Rakovsky added a comment -

          danielbeckgusreiber
          Hi Friends,

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

          Roee Rakovsky added a comment - danielbeck gusreiber Hi Friends, Is there any idea when this bug is going to be fixed ?

          Marcel Montel added a comment -

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

          Marcel Montel added a comment - 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.

          James Whitworth added a comment - The duplicate issues were just resolved as being duplicates, I don't think any fixes went in for them.

          gus reiber added a comment -

          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):

          1. 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
          2. 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
            
          3. 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.

          gus reiber added a comment - 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.

          gus reiber added a comment -

          recena As far as I can tell, there are only 3 uncomfortable paths forward:

          1. refactor the config form to get out of tables, which was the original plan
          2. choose a new look for the page in which the exploding column width isn't visually obvious
          3. 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.

          gus reiber added a comment - 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.

          Daniel Beck added a comment -

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

          Daniel Beck added a comment - gusreiber What about the CSS changes mentioned in comments to JENKINS-16327 , JENKINS-27367 or JENKINS-35263 ? Do they not solve the problem?

          gus reiber added a comment -

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

          gus reiber added a comment - https://github.com/jenkinsci/jenkins/pull/2574 yup, 27367 is the silver bullet I was not finding.

          Oleg Nenashev added a comment -

          The PR from gusreiber has been closed
          recena, could you please clarify the issue status?

          Oleg Nenashev added a comment - The PR from gusreiber has been closed recena , could you please clarify the issue status?

          oleg_nenashev, let me to take a look...

          Manuel Recena Soto added a comment - oleg_nenashev , let me to take a look...

          Alex Taylor added a comment -

          recena Any ideas on the future PRs for this issue?

          Alex Taylor added a comment - recena Any ideas on the future PRs for this issue?

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

          Manuel Recena Soto added a comment - ataylor I could take a look. Did you reproduce it recently?

          Daniel Beck added a comment -

          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?

          Daniel Beck added a comment - 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?

          Alex Taylor added a comment -

          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

          Alex Taylor added a comment - 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

          Alex Raber added a comment - - edited

          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).

          Alex Raber added a comment - - edited 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).

          Neil Sleightholm added a comment - - edited

          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.

          Neil Sleightholm added a comment - - edited 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.

            recena Manuel Recena Soto
            szhem Sergey Zhemzhitsky
            Votes:
            13 Vote for this issue
            Watchers:
            23 Start watching this issue

              Created:
              Updated: