Moodle
  1. Moodle
  2. MDL-25697

iconsmall class gives icons poor vertical alignment under Chrome

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Trivial Trivial
    • Resolution: Fixed
    • Affects Version/s: 2.0, 2.1.1, 2.2
    • Fix Version/s: 2.0.5, 2.1.2
    • Component/s: Themes
    • Labels:
    • Environment:
      Chrome 7.0.517.44-r64615

      Description

      Under Chrome, icons of img class 'iconsmall' have a vertical alignment of 'middle' which means that they're rendered relative to the bottom of the line (or so it appears).
      theme/base/style/core.css defines img.iconsmall with a vertical-alignment of middle.

        Gliffy Diagrams

        1. 25697.current.alignment.png
          54 kB
        2. 25697.improved.alignment.png
          54 kB
        3. chrome.png
          247 kB
        4. firefox.png
          290 kB
        5. safari.png
          250 kB

          Activity

          Hide
          Eloy Lafuente (stronk7) added a comment -

          Closing this as duplicate of MDL-25682, already fixed. Feel free to reopen it (not this) if necessary.

          Thanks for the report, ciao

          Show
          Eloy Lafuente (stronk7) added a comment - Closing this as duplicate of MDL-25682 , already fixed. Feel free to reopen it (not this) if necessary. Thanks for the report, ciao
          Hide
          Andrew Nicols added a comment -

          Hi Eloy,

          This isn't the same bug - in some browsers (e.g. Chrome), the icons have a weird vertical alignment and are too low. After fixing the iconsmall Ajax issue it became more apparent. On firefox, the icons look fine; but on chrome they look really low and as though they're not related to the line of text. I'll submit some screenshots when I get to a computer.

          Andrew

          Show
          Andrew Nicols added a comment - Hi Eloy, This isn't the same bug - in some browsers (e.g. Chrome), the icons have a weird vertical alignment and are too low. After fixing the iconsmall Ajax issue it became more apparent. On firefox, the icons look fine; but on chrome they look really low and as though they're not related to the line of text. I'll submit some screenshots when I get to a computer. Andrew
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Hi Andrew,

          well spotted thanks! Yesterday I tested it under a bunch of browsers (Chrome included) and I centered myself too much about seeing all the command icons (move, edit...) aligned okey. So then I arrived here and considered it fixed wrongly.

          Looking to it carefully it seems that the problem aren't the activity icon (on the left), neither the command links (on the right), but the activity name itself that is displayed slightly higher than the other two. And that not only happens with Chrome, but with Safari too. It's an small detail but also an irritating one.

          So I'm reopening this, assigning to Sam to see if he can apply there some of his CSS dark magic to have all the elements visually aligned ok.

          Note it must work with edition enabled/disabled and with ajax enabled/disabled too. Also labels and sections must be tested as far as they use the "commands" icons too.

          Thanks for pointing us to this, Andrew! Ciao

          Show
          Eloy Lafuente (stronk7) added a comment - Hi Andrew, well spotted thanks! Yesterday I tested it under a bunch of browsers (Chrome included) and I centered myself too much about seeing all the command icons (move, edit...) aligned okey. So then I arrived here and considered it fixed wrongly. Looking to it carefully it seems that the problem aren't the activity icon (on the left), neither the command links (on the right), but the activity name itself that is displayed slightly higher than the other two. And that not only happens with Chrome, but with Safari too. It's an small detail but also an irritating one. So I'm reopening this, assigning to Sam to see if he can apply there some of his CSS dark magic to have all the elements visually aligned ok. Note it must work with edition enabled/disabled and with ajax enabled/disabled too. Also labels and sections must be tested as far as they use the "commands" icons too. Thanks for pointing us to this, Andrew! Ciao
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Uploading magnified shoots of some activities under chrome, safari and firefox.

          • See how firefox is the one rendering the thing "better" (visually).
          • Both chrome and safari show the activity name slightly high, so the effect is that command options are wrongly unaligned.
          • Also note that chrome and firefox doesn't show any "whitespace" between activities (forum icons) while safari shows 1pt. I think this should be fixed too.

          Ciao

          Show
          Eloy Lafuente (stronk7) added a comment - Uploading magnified shoots of some activities under chrome, safari and firefox. See how firefox is the one rendering the thing "better" (visually). Both chrome and safari show the activity name slightly high, so the effect is that command options are wrongly unaligned. Also note that chrome and firefox doesn't show any "whitespace" between activities (forum icons) while safari shows 1pt. I think this should be fixed too. Ciao
          Hide
          Sam Hemelryk added a comment -

          I'm putting this up for peer-review at this point.
          Due to recent changes to the way activity editing icons are being printed this change is very simple and works across all themes.
          Personally I do like the new alignment more than the current alignment, I'll attach screenshots to show the difference shortly.

          Cheers
          Sam

          Show
          Sam Hemelryk added a comment - I'm putting this up for peer-review at this point. Due to recent changes to the way activity editing icons are being printed this change is very simple and works across all themes. Personally I do like the new alignment more than the current alignment, I'll attach screenshots to show the difference shortly. Cheers Sam
          Hide
          Rossiani Wijaya added a comment -

          Hi Sam,

          The patch is working fine. I tested on chrome, firefox, safari and ie9.

          Show
          Rossiani Wijaya added a comment - Hi Sam, The patch is working fine. I tested on chrome, firefox, safari and ie9.
          Hide
          Sam Hemelryk added a comment -

          Thanks Rosie - putting up for integration now

          Show
          Sam Hemelryk added a comment - Thanks Rosie - putting up for integration now
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Integrated, thanks!

          Show
          Eloy Lafuente (stronk7) added a comment - Integrated, thanks!
          Hide
          Andrew Davis added a comment -

          I tested this in both Firefox and Chrome using a handful of randomly selected themes. They all looked fine.

          Show
          Andrew Davis added a comment - I tested this in both Firefox and Chrome using a handful of randomly selected themes. They all looked fine.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          git repositories have been updated with your awesome changes, thanks! Closing.

          Show
          Eloy Lafuente (stronk7) added a comment - git repositories have been updated with your awesome changes, thanks! Closing.

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: