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

help icons vertically mis-aligned on 2.0 newJob page

    XMLWordPrintable

    Details

    • Similar Issues:

      Description

      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

        Attachments

          Activity

          Hide
          swashbuck1r Spike Washburn added a comment -

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

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

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

          Show
          swashbuck1r Spike Washburn added a comment - gus reiber perhaps you could make a ruling on how "broken" and "ugly" this is.
          Hide
          teilo James Nord added a comment -

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

          Show
          teilo James Nord added a comment - I think I meant horizontally aligned - but you get what I mean
          Hide
          swashbuck1r 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.

          Show
          swashbuck1r 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.
          Hide
          gusreiber 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.

          Show
          gusreiber 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.
          Hide
          gusreiber 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.

          Show
          gusreiber 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.

            People

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

              Dates

              Created:
              Updated:
              Resolved: