Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-25697

iconsmall class gives icons poor vertical alignment under Chrome

    Details

    • Type: Bug
    • Status: Closed
    • Priority: 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

          Attachments

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

            Activity

            Hide
            stronk7 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
            stronk7 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
            dobedobedoh 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
            dobedobedoh 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
            stronk7 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
            stronk7 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
            stronk7 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
            stronk7 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
            samhemelryk 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
            samhemelryk 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
            rwijaya Rossiani Wijaya added a comment -

            Hi Sam,

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

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

            Thanks Rosie - putting up for integration now

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

            Integrated, thanks!

            Show
            stronk7 Eloy Lafuente (stronk7) added a comment - Integrated, thanks!
            Hide
            andyjdavis 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
            andyjdavis 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
            stronk7 Eloy Lafuente (stronk7) added a comment -

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

            Show
            stronk7 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:
                  Fix Release Date:
                  10/Oct/11