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

help icons vertically mis-aligned on 2.0 newJob page

      The blue "Help" icons are no longer correctly aligned on the 2.0 newJob page.

      In previous releases for textboxes & dropdowns they where vertically aligned in the center which looked visually appealing. Now they are aligned at the top which looks ugly.

      The icon should be aligned with the first line of text - just as it is for checkboxes

          [JENKINS-33955] help icons vertically mis-aligned on 2.0 newJob page

          Top-align looks better for large controls, but not as good for single-line controls.

          Spike Washburn added a comment - Top-align looks better for large controls, but not as good for single-line controls.

          gusreiber perhaps you could make a ruling on how "broken" and "ugly" this is.

          Spike Washburn added a comment - gusreiber perhaps you could make a ruling on how "broken" and "ugly" this is.

          James Nord added a comment -

          I think I meant horizontally aligned - but you get what I mean

          James Nord added a comment - I think I meant horizontally aligned - but you get what I mean

          Spike Washburn added a comment - - edited

          Perhaps I misread. I read this issue as: you'd like the icon moved down to be centered on the horizontal center-line of the textbox...moving up and down is vertical alignment/offset. If you meant that you want more/less space between the right-edge of textbox and the left-edge of the help icon, that would be horizontal alignment/offset.

          For comparison, I have attached the old alignments with my own notes about what was ugly nice about them.

          Spike Washburn added a comment - - edited Perhaps I misread. I read this issue as: you'd like the icon moved down to be centered on the horizontal center-line of the textbox...moving up and down is vertical alignment/offset. If you meant that you want more/less space between the right-edge of textbox and the left-edge of the help icon, that would be horizontal alignment/offset. For comparison, I have attached the old alignments with my own notes about what was ugly nice about them.

          gus reiber added a comment -

          Yeah, so my conclusion is that they have to be top aligned as they are now. Before when they were vertical middle, with tall controls, it was almost impossible to tell what the hell the icon even related to. With single line controls, align middle is better, but only slightly so. I thought I had tried to offset the top such that for single lines, even when the item was aligned top, it actually seemed centered. I will take another look, but the thing is that i don't have any metadata that tells me if this label or that icon is associated with a short or tall control.

          ...thus I need some rules that work mostly well in the most cases.

          There are still some cases where the text vertical alignment is totally messed up.

          ...anyway. I will take a look, but I am happy to say the alignment is much, much better now than it was.
          I don't think perfect is possible given the table hackery being used to render these guys.

          gus reiber added a comment - Yeah, so my conclusion is that they have to be top aligned as they are now. Before when they were vertical middle, with tall controls, it was almost impossible to tell what the hell the icon even related to. With single line controls, align middle is better, but only slightly so. I thought I had tried to offset the top such that for single lines, even when the item was aligned top, it actually seemed centered. I will take another look, but the thing is that i don't have any metadata that tells me if this label or that icon is associated with a short or tall control. ...thus I need some rules that work mostly well in the most cases. There are still some cases where the text vertical alignment is totally messed up. ...anyway. I will take a look, but I am happy to say the alignment is much, much better now than it was. I don't think perfect is possible given the table hackery being used to render these guys.

          gus reiber added a comment -

          k. So here is the deal...
          The help buttons must be vertically aligned top or tall controls look awful. But, the top padding of its parent cell is set such that the help will be middle aligned with a single line of text when the text is allowed to be its recommended height. This make the help button look right next to all the checkboxes and radio button lists in the config form as well as tall controls.

          For lines where there is a text input or button, the text line is taller than lines where there isn't a form element. In those cases, the button does not look vertically aligned middle and thus seems slightly off.

          I can set the minimum line height to match the height of the form input buttons, but that will make the long form longer, so I am reluctant to do it. But, if there are continued complaints, I will try that next.

          I just don't have enough data, short of doing a bunch of JS hacking, to know the exact right rule to apply to that button.

          gus reiber added a comment - k. So here is the deal... The help buttons must be vertically aligned top or tall controls look awful. But, the top padding of its parent cell is set such that the help will be middle aligned with a single line of text when the text is allowed to be its recommended height. This make the help button look right next to all the checkboxes and radio button lists in the config form as well as tall controls. For lines where there is a text input or button, the text line is taller than lines where there isn't a form element. In those cases, the button does not look vertically aligned middle and thus seems slightly off. I can set the minimum line height to match the height of the form input buttons, but that will make the long form longer, so I am reluctant to do it. But, if there are continued complaints, I will try that next. I just don't have enough data, short of doing a bunch of JS hacking, to know the exact right rule to apply to that button.

            gusreiber gus reiber
            teilo James Nord
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: