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
    • Rank:
      15127

      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.

      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: