Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-25971

Job list and console output are not properly aligned in the new UI

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Major Major
    • core
    • Jenkins v1.593
      Ubuntu 14.04.1 LTS
      Screen resolution: 1680x1050
      Chrome version 40.0.2214.28 beta (64-bit)

      When a view that is not the "All" one is selected as the default view, the job list appears at the bottom of the page, just after the executors box, instead of being near the task menu. This also happens to the Console Output view; it is always displayed at the bottom, after the menu.

      The job list appears OK after resizing the window, or if the "All" view is configured as the default one, but the Console Output view always appears in the wrong place.

      I've installed the Simple Theme plugin to see if the components are aligned properly in other themes and they work, so it seems something wrong in the default CSS. I've provided my screen resolution and other details in the environment details of the issue.

          [JENKINS-25971] Job list and console output are not properly aligned in the new UI

          Ignasi Barrera added a comment - - edited

          Although the environment description says it happens in Chrome, the console alignment also is wrong in Firefox (version 34.0).

          Ignasi Barrera added a comment - - edited Although the environment description says it happens in Chrome, the console alignment also is wrong in Firefox (version 34.0).

          Chad Beaudin added a comment -

          Is there a version slated for a fix for this?

          Chad Beaudin added a comment - Is there a version slated for a fix for this?

          Daniel Beck added a comment -

          This issue will be updated when a fix has been merged. It will then be released 1-2 weeks later.

          https://wiki.jenkins-ci.org/display/JENKINS/Release+Process

          Daniel Beck added a comment - This issue will be updated when a fix has been merged. It will then be released 1-2 weeks later. https://wiki.jenkins-ci.org/display/JENKINS/Release+Process

          Steven Murphy added a comment -

          Not sure if it is of any help. But it displays correctly with IE 11 (11.0.9600.17351) and IE 10 (10.0.9200.17148), although not in IE 9 or 8.

          I did find a work around. If you reduce the zoom to 95% (or lower) then increase it back to 100%, the alignment is OK.

          Steven Murphy added a comment - Not sure if it is of any help. But it displays correctly with IE 11 (11.0.9600.17351) and IE 10 (10.0.9200.17148), although not in IE 9 or 8. I did find a work around. If you reduce the zoom to 95% (or lower) then increase it back to 100%, the alignment is OK.

          Tom FENNELLY added a comment -

          I was not able to reproduce this issue locally, but I did change how the panel sizing is done and pushed it to upstream master. There's a build running now at https://jenkins.ci.cloudbees.com/job/core/job/jenkins-core/1815/. It will produce a war file that maybe people can test and verify if it fixes the issue or not.

          The change I made is in commit https://github.com/jenkinsci/jenkins/commit/89cdd5113fc8e57961c69649a4f9f1472fafc22b. It changes the sizing from using Javascript to using pure CSS. I think it's a better way of doing it anyway and hopefully will fix the sort of issues you guys are seeing.

          Tom FENNELLY added a comment - I was not able to reproduce this issue locally, but I did change how the panel sizing is done and pushed it to upstream master. There's a build running now at https://jenkins.ci.cloudbees.com/job/core/job/jenkins-core/1815/ . It will produce a war file that maybe people can test and verify if it fixes the issue or not. The change I made is in commit https://github.com/jenkinsci/jenkins/commit/89cdd5113fc8e57961c69649a4f9f1472fafc22b . It changes the sizing from using Javascript to using pure CSS. I think it's a better way of doing it anyway and hopefully will fix the sort of issues you guys are seeing.

          dogfood added a comment -

          Integrated in jenkins_main_trunk #3875
          JENKINS-25971 use css only to size left and right panels (Revision 89cdd5113fc8e57961c69649a4f9f1472fafc22b)

          Result = SUCCESS
          tom.fennelly : 89cdd5113fc8e57961c69649a4f9f1472fafc22b
          Files :

          • war/src/main/webapp/css/style.css
          • war/src/main/webapp/scripts/hudson-behavior.js
          • core/src/main/resources/lib/layout/layout.jelly

          dogfood added a comment - Integrated in jenkins_main_trunk #3875 JENKINS-25971 use css only to size left and right panels (Revision 89cdd5113fc8e57961c69649a4f9f1472fafc22b) Result = SUCCESS tom.fennelly : 89cdd5113fc8e57961c69649a4f9f1472fafc22b Files : war/src/main/webapp/css/style.css war/src/main/webapp/scripts/hudson-behavior.js core/src/main/resources/lib/layout/layout.jelly

          Code changed in jenkins
          User: tfennelly
          Path:
          core/src/main/resources/lib/layout/layout.jelly
          war/src/main/webapp/css/style.css
          war/src/main/webapp/scripts/hudson-behavior.js
          http://jenkins-ci.org/commit/jenkins/89cdd5113fc8e57961c69649a4f9f1472fafc22b
          Log:
          JENKINS-25971 use css only to size left and right panels

          Was using JS to size panels. This change only effects screens > 768px. Less than 768px is responsive.

          SCM/JIRA link daemon added a comment - Code changed in jenkins User: tfennelly Path: core/src/main/resources/lib/layout/layout.jelly war/src/main/webapp/css/style.css war/src/main/webapp/scripts/hudson-behavior.js http://jenkins-ci.org/commit/jenkins/89cdd5113fc8e57961c69649a4f9f1472fafc22b Log: JENKINS-25971 use css only to size left and right panels Was using JS to size panels. This change only effects screens > 768px. Less than 768px is responsive.

          Code changed in jenkins
          User: tfennelly
          Path:
          war/src/main/webapp/css/style.css
          http://jenkins-ci.org/commit/jenkins/3e9cdcbc8527d6ee2be143aad3365df8fcd02c74
          Log:
          Tweak of earlier fix for JENKINS-25971

          Making side-panel and main-panel absolute positioned and full height

          SCM/JIRA link daemon added a comment - Code changed in jenkins User: tfennelly Path: war/src/main/webapp/css/style.css http://jenkins-ci.org/commit/jenkins/3e9cdcbc8527d6ee2be143aad3365df8fcd02c74 Log: Tweak of earlier fix for JENKINS-25971 Making side-panel and main-panel absolute positioned and full height

          Daniel Beck added a comment -

          Tom's fix is in 1.596. Does this issue still occur in that version?

          Daniel Beck added a comment - Tom's fix is in 1.596. Does this issue still occur in that version?

          Steven Murphy added a comment -

          I have have tested this with 1.596 on IE, Chrome and FireFox.

          With Chrome it looks perfect.
          IE and FireFox have a minor alignment issue still. The list in the Executed Ant Targets box has the bullet point on the outside of the box, comparing the screens it seems they were off the edge of the page before.

          I can provide screen shots if required.

          Steven Murphy added a comment - I have have tested this with 1.596 on IE, Chrome and FireFox. With Chrome it looks perfect. IE and FireFox have a minor alignment issue still. The list in the Executed Ant Targets box has the bullet point on the outside of the box, comparing the screens it seems they were off the edge of the page before. I can provide screen shots if required.

          Tom FENNELLY added a comment -

          Yes, please do provide screenshot that highlight the issue you are seeing.

          Tom FENNELLY added a comment - Yes, please do provide screenshot that highlight the issue you are seeing.

          Steven Murphy added a comment -

          Screen shot of 1.594 Console Output screen

          (of course the black box has been added by me to blank out file names etc...)

          Steven Murphy added a comment - Screen shot of 1.594 Console Output screen (of course the black box has been added by me to blank out file names etc...)

          Steven Murphy added a comment -

          Screen shot of the Console Output page in 1.596. Note the bullet points to the left of the ant target names.

          (of course the black box has been added by me to obscure file names etc...)

          Steven Murphy added a comment - Screen shot of the Console Output page in 1.596. Note the bullet points to the left of the ant target names. (of course the black box has been added by me to obscure file names etc...)

          Daniel Beck added a comment -

          Probably just a changed class name/element ID in the hierarchy so that the existing rules no longer match.

          Gradle plugin would be affected similarly.

          Daniel Beck added a comment - Probably just a changed class name/element ID in the hierarchy so that the existing rules no longer match. Gradle plugin would be affected similarly.

          Steven Murphy added a comment -

          Not sure if this is related to the changes made, but I have just noticed that the 'Help us localize this page' bar is now static and obscures the 'Save' and 'Appy' buttons.

          I've noticed this on the main Jenkins configuration page and the project configuration page.

          Steven Murphy added a comment - Not sure if this is related to the changes made, but I have just noticed that the 'Help us localize this page' bar is now static and obscures the 'Save' and 'Appy' buttons. I've noticed this on the main Jenkins configuration page and the project configuration page.

          Chad Beaudin added a comment -

          Thanks for the fix guys.

          Also, I can confirm what Steven is seeing with the the Save and Apply buttons being obscured.

          Chad Beaudin added a comment - Thanks for the fix guys. Also, I can confirm what Steven is seeing with the the Save and Apply buttons being obscured.

          Daniel Beck added a comment -

          Known issues. Tom is working on fixes for JENKINS-26312 JENKINS-26298 JENKINS-26306 right now.

          Daniel Beck added a comment - Known issues. Tom is working on fixes for JENKINS-26312 JENKINS-26298 JENKINS-26306 right now.

          Code changed in jenkins
          User: tfennelly
          Path:
          war/src/main/webapp/css/style.css
          http://jenkins-ci.org/commit/jenkins/66c02a4cc32a22cc81311eb6b478359082924c92
          Log:
          Revert "Tweak of earlier fix for JENKINS-25971"

          This reverts commit 3e9cdcbc8527d6ee2be143aad3365df8fcd02c74.

          SCM/JIRA link daemon added a comment - Code changed in jenkins User: tfennelly Path: war/src/main/webapp/css/style.css http://jenkins-ci.org/commit/jenkins/66c02a4cc32a22cc81311eb6b478359082924c92 Log: Revert "Tweak of earlier fix for JENKINS-25971 " This reverts commit 3e9cdcbc8527d6ee2be143aad3365df8fcd02c74.

          Code changed in jenkins
          User: tfennelly
          Path:
          war/src/main/webapp/css/style.css
          http://jenkins-ci.org/commit/jenkins/79379fde471eac7bcecad2a8cbde6ecf9e7b4e68
          Log:
          Revert "Tweak of earlier fix for JENKINS-25971"

          This reverts commit 3e9cdcbc8527d6ee2be143aad3365df8fcd02c74.

          (cherry picked from commit 66c02a4cc32a22cc81311eb6b478359082924c92)

          SCM/JIRA link daemon added a comment - Code changed in jenkins User: tfennelly Path: war/src/main/webapp/css/style.css http://jenkins-ci.org/commit/jenkins/79379fde471eac7bcecad2a8cbde6ecf9e7b4e68 Log: Revert "Tweak of earlier fix for JENKINS-25971 " This reverts commit 3e9cdcbc8527d6ee2be143aad3365df8fcd02c74. (cherry picked from commit 66c02a4cc32a22cc81311eb6b478359082924c92)

          Daniel Beck added a comment -

          Resolving this issue as it seems to have been resolved a month ago.

          For the ant "list box" alignment issue, please file a new bug against ant-plugin.

          Daniel Beck added a comment - Resolving this issue as it seems to have been resolved a month ago. For the ant "list box" alignment issue, please file a new bug against ant-plugin.

            Unassigned Unassigned
            nacx Ignasi Barrera
            Votes:
            7 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved: