Moodle
  1. Moodle
  2. MDL-40722

Clean theme: Resizing 3 column page with all blocks on the left is not displayed correctly

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Blocker Blocker
    • Resolution: Fixed
    • Affects Version/s: 2.5.1
    • Fix Version/s: 2.6
    • Component/s: Themes
    • Testing Instructions:
      Hide

      Although this css is only within the @media (max-width: 768px) section, it may be worth testing on other screen sizes just to make certain.

      • Navigate around Moodle on a narrow device
      • Ensure that all blocks are full width
      • Make sure that you check out as many different pages as you can with as many different layouts as possible
      Show
      Although this css is only within the @media (max-width: 768px) section, it may be worth testing on other screen sizes just to make certain. Navigate around Moodle on a narrow device Ensure that all blocks are full width Make sure that you check out as many different pages as you can with as many different layouts as possible
    • Affected Branches:
      MOODLE_25_STABLE
    • Fixed Branches:
      MOODLE_26_STABLE
    • Pull Master Branch:
      MDL-40722-master
    • Story Points (Obsolete):
      13
    • Sprint:
      FRONTEND Sprint 6

      Description

      Following settings:

      Course main page (usually 3 columns)
      I move all blocks to the left.
      I make the screen resolution smaller than 768px

      Result:
      The blocks on the left side are far too narrow, they should be larger. Responsiveness fails.

        Gliffy Diagrams

        1. 1 portrait.png
          91 kB
        2. 2 from-portrait-to-landscape.png
          98 kB
        3. 3 landscape-after-scaling.png
          92 kB
        4. 4 from-landscape-to-portrain-after-scaling.png
          92 kB
        5. 5 portrait-forum-posts.png
          140 kB
        6. MDL-40722.jpg
          42 kB
        7. MDL-40722-2.png
          239 kB
        8. MDL-40722-workflow.jpg
          109 kB

          Issue Links

            Activity

            Hide
            Mary Evans added a comment -

            Thank you for reporting this bug. I had noticed this myself, and I am sure, so have others working on this theme. However, since there are many people working on Bootstrap, to make more 'Mobile friendly' this may well be a back lash of those changes. We are currently trying to find a way to make the blocks work in responsive mode, and so it's difficult to find out where we are with it all.

            I'll try and fix this or at least see if I can improve it at least.

            Thanks
            Mary

            Show
            Mary Evans added a comment - Thank you for reporting this bug. I had noticed this myself, and I am sure, so have others working on this theme. However, since there are many people working on Bootstrap, to make more 'Mobile friendly' this may well be a back lash of those changes. We are currently trying to find a way to make the blocks work in responsive mode, and so it's difficult to find out where we are with it all. I'll try and fix this or at least see if I can improve it at least. Thanks Mary
            Hide
            Mary Evans added a comment -

            Just adding Sam Jason & Damyon as watchers. Just wondering if any of you are working on this problem elsewhere? I'll try and add an image if I have time.

            Show
            Mary Evans added a comment - Just adding Sam Jason & Damyon as watchers. Just wondering if any of you are working on this problem elsewhere? I'll try and add an image if I have time.
            Hide
            Mary Evans added a comment -

            Added responsive design screen capture of device types of less than 768px:
            240 x 320 (mobile)
            320 x 480 (mobile)
            480 x 640 (small tablet)

            Show
            Mary Evans added a comment - Added responsive design screen capture of device types of less than 768px: 240 x 320 (mobile) 320 x 480 (mobile) 480 x 640 (small tablet)
            Hide
            Ralf Krause added a comment -

            Hi,
            not only the blocks at the bottom are too small. Also the main part is to small when the page width gets less than 768px and all blocks a moved to the left side.
            If you move all blocks to the right side then everything is okay.
            Ralf

            Show
            Ralf Krause added a comment - Hi, not only the blocks at the bottom are too small. Also the main part is to small when the page width gets less than 768px and all blocks a moved to the left side. If you move all blocks to the right side then everything is okay. Ralf
            Hide
            Mary Evans added a comment -

            Unfortunately I am not feeling well and so unassigning this to allow someone else to pick it up and fix it.

            Show
            Mary Evans added a comment - Unfortunately I am not feeling well and so unassigning this to allow someone else to pick it up and fix it.
            Hide
            David Scotson added a comment -

            I hadn't seen this bug and filed my own:

            https://tracker.moodle.org/browse/MDL-40923

            It has some info about the specific CSS rules that are causing this.

            Show
            David Scotson added a comment - I hadn't seen this bug and filed my own: https://tracker.moodle.org/browse/MDL-40923 It has some info about the specific CSS rules that are causing this.
            Hide
            David Scotson added a comment -

            So the basic problem is CSS specificity, the rules that are setting this width are far more specific than the standard Bootstrap responsive.

            So the straightforward fix is to make these ones less specific or put them inside a media query. However, I'm not sure what these rules are doing in the first place, so maybe there's a better fix.

            Show
            David Scotson added a comment - So the basic problem is CSS specificity, the rules that are setting this width are far more specific than the standard Bootstrap responsive. So the straightforward fix is to make these ones less specific or put them inside a media query. However, I'm not sure what these rules are doing in the first place, so maybe there's a better fix.
            Hide
            Mary Evans added a comment -

            This only affects 2.5.1 at the moment. Looks like it's been fixed with the new page layouts in 2.6.

            Anyway, I don't know who changed the CSS for the side blocks, but it wasn't me!

            Show
            Mary Evans added a comment - This only affects 2.5.1 at the moment. Looks like it's been fixed with the new page layouts in 2.6. Anyway, I don't know who changed the CSS for the side blocks, but it wasn't me!
            Hide
            David Scotson added a comment -

            Not seeing this bug when it was filed reminded me: how can I get updates to linked bugs? I'm fairly sure i'm subscribed if someone leaves a comment on the parent bug, but I don't get notified for new child bugs.

            Show
            David Scotson added a comment - Not seeing this bug when it was filed reminded me: how can I get updates to linked bugs? I'm fairly sure i'm subscribed if someone leaves a comment on the parent bug, but I don't get notified for new child bugs.
            Hide
            Mary Evans added a comment -

            @David, I have just added Michael de Raadt as he is the person to talk to about getting onto the Themes Watchers list. It might also help if you had permission to submit fixes for integration too, which you seem to be missing, although I was told that you had those permissions...?

            Show
            Mary Evans added a comment - @David, I have just added Michael de Raadt as he is the person to talk to about getting onto the Themes Watchers list. It might also help if you had permission to submit fixes for integration too, which you seem to be missing, although I was told that you had those permissions...?
            Hide
            David Scotson added a comment -

            Where would I see the integration workflow? On this bug I can see "start peer review", "request peer review" and "workflow" which is a dropdown and offers only "Close issue".

            Show
            David Scotson added a comment - Where would I see the integration workflow? On this bug I can see "start peer review", "request peer review" and "workflow" which is a dropdown and offers only "Close issue".
            Hide
            Mary Evans added a comment -

            This is what I see...

            Show
            Mary Evans added a comment - This is what I see...
            Hide
            David Scotson added a comment -

            Nope, no sign of it for me.

            Show
            David Scotson added a comment - Nope, no sign of it for me.
            Hide
            Michael de Raadt added a comment -

            Hi, David.

            I don't believe that if you are watching an issue that you will see when sub-tasks or linked issues are created. You could set up a filter to achieve this and add it to your dashboard.

            The workflow actions you can take depend on your role in an issue and your groups in the Tracker. If you were to assign the issue to yourself you would have more control.

            Show
            Michael de Raadt added a comment - Hi, David. I don't believe that if you are watching an issue that you will see when sub-tasks or linked issues are created. You could set up a filter to achieve this and add it to your dashboard. The workflow actions you can take depend on your role in an issue and your groups in the Tracker. If you were to assign the issue to yourself you would have more control.
            Hide
            Brian King added a comment -

            @Mary, in MDL-40791 you say that you're sure that this is fixed .... At the moment it is not fixed in the latest 2.5.1 build 20130905. Is there a fix already available someplace? I didn't see any obviously related commits on the master branch.

            Show
            Brian King added a comment - @Mary, in MDL-40791 you say that you're sure that this is fixed .... At the moment it is not fixed in the latest 2.5.1 build 20130905. Is there a fix already available someplace? I didn't see any obviously related commits on the master branch.
            Hide
            Mark Aberdour added a comment -

            Hi, does anyone know if there is a fix for this, or some 2.6 code that can be backported? As it stands, 2.5.1 looks absolutely hideous on a mobile device, it makes for a really bad user experience.

            Show
            Mark Aberdour added a comment - Hi, does anyone know if there is a fix for this, or some 2.6 code that can be backported? As it stands, 2.5.1 looks absolutely hideous on a mobile device, it makes for a really bad user experience.
            Hide
            David Bogner added a comment -

            Hi,

            I did solve it that way:

            @media (max-width: @navbarCollapseWidth) {
            .empty-region-side-post.used-region-side-pre #region-main.span8,.empty-region-side-post.used-region-side-pre #block-region-side-pre.span4

            { width: auto; }

            }

            I put that in a less file in a theme, that's also based on bootstrapbase. I guess, if that is somewhere in a less file in bootstrapbase, where it will not be overriden, then it would work.

            Show
            David Bogner added a comment - Hi, I did solve it that way: @media (max-width: @navbarCollapseWidth) { .empty-region-side-post.used-region-side-pre #region-main.span8,.empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 { width: auto; } } I put that in a less file in a theme, that's also based on bootstrapbase. I guess, if that is somewhere in a less file in bootstrapbase, where it will not be overriden, then it would work.
            Hide
            Mary Evans added a comment -

            I am no longer able to work on this so have set this as unassigned to allow FRONTEND team to fix this.

            Show
            Mary Evans added a comment - I am no longer able to work on this so have set this as unassigned to allow FRONTEND team to fix this.
            Hide
            Michael de Raadt added a comment -

            Thanks, Mary.

            I've changed a few issue state values to get it on the list soon.

            Show
            Michael de Raadt added a comment - Thanks, Mary. I've changed a few issue state values to get it on the list soon.
            Hide
            Andrew Nicols added a comment -

            Barbara has just raised this issue (and is marking that one as a duplicate).
            This was caused by MDL-39824 which seems a little confusing. Hopefully Sam Hemelryk will be able to shed some light, but unfortunately he's away for the next week.

            Show
            Andrew Nicols added a comment - Barbara has just raised this issue (and is marking that one as a duplicate). This was caused by MDL-39824 which seems a little confusing. Hopefully Sam Hemelryk will be able to shed some light, but unfortunately he's away for the next week.
            Hide
            Barbara Ramiro added a comment -

            Attaching more detailed screenshots as found.

            Show
            Barbara Ramiro added a comment - Attaching more detailed screenshots as found.
            Hide
            Mary Evans added a comment - - edited

            The problem here is in the responsive.less files for this theme, where span3 is still using the width for span4 which is 23.123456789% (can't remember the exact figure) for when it is below 768px (an iPad portrait view) where in actual fact it should be 100%.

            See MDL-40923 for ideas

            .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4

            { width: 23.404255319148934%; }

            should be

            .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4

            { width: 100%; }

            for max-width: 767px

            Show
            Mary Evans added a comment - - edited The problem here is in the responsive.less files for this theme, where span3 is still using the width for span4 which is 23.123456789% (can't remember the exact figure) for when it is below 768px (an iPad portrait view) where in actual fact it should be 100%. See MDL-40923 for ideas .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 { width: 23.404255319148934%; } should be .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 { width: 100%; } for max-width: 767px
            Hide
            Andrew Nicols added a comment -

            Jut a note that this is caused by the following lines of less:

            .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {
                /** decrease the span size by 1 **/
                .fluid-span(3);
            }
            

            These were introduced in 8bfd530b for MDL-39824.
            I'm not familiar with the fluid-span functions in less, or the original intention of this line so I'm going to leave this to someone who knows what they're doing. Taking out this rule entirely, or changing it to 12 makes it work as expected on mobile.

            Show
            Andrew Nicols added a comment - Jut a note that this is caused by the following lines of less: .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 { /** decrease the span size by 1 **/ .fluid-span(3); } These were introduced in 8bfd530b for MDL-39824 . I'm not familiar with the fluid-span functions in less, or the original intention of this line so I'm going to leave this to someone who knows what they're doing. Taking out this rule entirely, or changing it to 12 makes it work as expected on mobile.
            Hide
            David Scotson added a comment -

            I'm not familiar with this bit of code, but I think I've seen the same type of bug before.

            Basically, the Moodle workarounds have a much higher CSS specificity than standard Bootstrap rules (due to the use of multiple classes plus ids) so the standard Bootstrap CSS, which should make a .span4 go to 100% when the screen gets smaller get overruled in the CSS hierarchy by this workaround, so it's no longer responsive.

            As with other over-specifying problems the "solution" is to add yet another, highly specific rule to make sure the 100% width in the media query also gets applied.

            Show
            David Scotson added a comment - I'm not familiar with this bit of code, but I think I've seen the same type of bug before. Basically, the Moodle workarounds have a much higher CSS specificity than standard Bootstrap rules (due to the use of multiple classes plus ids) so the standard Bootstrap CSS, which should make a .span4 go to 100% when the screen gets smaller get overruled in the CSS hierarchy by this workaround, so it's no longer responsive. As with other over-specifying problems the "solution" is to add yet another, highly specific rule to make sure the 100% width in the media query also gets applied.
            Hide
            David Scotson added a comment -

            I've just noticed that I pointed this out already on the 29th July (which will be why I thought I'd seen this bug before).

            Mary claimed above that it was fixed in 2.6 by unrelated changes, is that true? Is it only in 2.5 that it's still broken?

            The fix David Bogner posted above should work (though I'd use 100% rather than auto):

            .empty-region-side-post.used-region-side-pre #region-main.span8,
            .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4

            { width: 100%; }

            It should go here (to keep it next to the code that would have done the work if it hadn't been overridden by more specific CSS):

            https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/moodle/responsive.less#L409-L416

            Show
            David Scotson added a comment - I've just noticed that I pointed this out already on the 29th July (which will be why I thought I'd seen this bug before). Mary claimed above that it was fixed in 2.6 by unrelated changes, is that true? Is it only in 2.5 that it's still broken? The fix David Bogner posted above should work (though I'd use 100% rather than auto): .empty-region-side-post.used-region-side-pre #region-main.span8, .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 { width: 100%; } It should go here (to keep it next to the code that would have done the work if it hadn't been overridden by more specific CSS): https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/less/moodle/responsive.less#L409-L416
            Hide
            Ralf Krause added a comment -

            In the current Moodle 2.6beta (20131022) the problem is not fixed.

            Show
            Ralf Krause added a comment - In the current Moodle 2.6beta (20131022) the problem is not fixed.
            Hide
            Mary Evans added a comment -

            It hasn't been fixed, and should get fixed. I'm too busy, so if you want to take this on David please do, or leave it for the FRONTEND team as they were responsible for breaking it in the first place as it worked OK prior to the changes to simplify Bootstrapbase themes.

            Show
            Mary Evans added a comment - It hasn't been fixed, and should get fixed. I'm too busy, so if you want to take this on David please do, or leave it for the FRONTEND team as they were responsible for breaking it in the first place as it worked OK prior to the changes to simplify Bootstrapbase themes.
            Hide
            Andrew Nicols added a comment -

            I've tried a variety of selectors to make this as non-specific as possible but to no avail.

            Thanks for the fix David Scotson

            Show
            Andrew Nicols added a comment - I've tried a variety of selectors to make this as non-specific as possible but to no avail. Thanks for the fix David Scotson
            Hide
            Andrew Nicols added a comment -

            Any chance of a peer review on this issue?

            Show
            Andrew Nicols added a comment - Any chance of a peer review on this issue?
            Hide
            Rossiani Wijaya added a comment -

            Hi guys,

            Thank you for working on this issue.

            The patch looks great, however it is only fixing the navigation blocks.

            Issue still occurs in forum post (screenshot 5 potrait-forum-posts.png) and discussion list (the width is now wider than the screen).

            Please advised if those issues should be address in this issue or separate.

            Show
            Rossiani Wijaya added a comment - Hi guys, Thank you for working on this issue. The patch looks great, however it is only fixing the navigation blocks. Issue still occurs in forum post (screenshot 5 potrait-forum-posts.png) and discussion list (the width is now wider than the screen). Please advised if those issues should be address in this issue or separate.
            Hide
            David Scotson added a comment -

            On qa.moodle.net the bit that's been targeted with this CSS:

            aside#block-region-side-pre.span4

            is called:

            #used-region-side-pre

            Is that the problem?

            Show
            David Scotson added a comment - On qa.moodle.net the bit that's been targeted with this CSS: aside#block-region-side-pre.span4 is called: #used-region-side-pre Is that the problem?
            Hide
            David Scotson added a comment -

            Actually ignore that, I was confused. I think it's actually because the patch specifies the "aside" tag, but only the block columns are asides, the main section is a "section" tag.

            Show
            David Scotson added a comment - Actually ignore that, I was confused. I think it's actually because the patch specifies the "aside" tag, but only the block columns are asides, the main section is a "section" tag.
            Hide
            Andrew Nicols added a comment -

            Thanks for pointing that out Rosie and finding the issue David Scotson.

            I've updated the patch and repushed. Ready for peer review MK II.

            Show
            Andrew Nicols added a comment - Thanks for pointing that out Rosie and finding the issue David Scotson . I've updated the patch and repushed. Ready for peer review MK II.
            Hide
            Rossiani Wijaya added a comment - - edited

            Thanks Andrew and David for working on this patch.

            It works great.

            [y] Syntax
            [y] Whitespace
            [y] Output
            [-] Language
            [-] Databases
            [y] Testing
            [-] Security
            [-] Documentation
            [y] Git
            [-] Third party code
            [y] Sanity check

            Note: I noticed couple of display bugs on forum discussion and post pages that needs to be addressed on separate issue (MDL-42682).

            Show
            Rossiani Wijaya added a comment - - edited Thanks Andrew and David for working on this patch. It works great. [y] Syntax [y] Whitespace [y] Output [-] Language [-] Databases [y] Testing [-] Security [-] Documentation [y] Git [-] Third party code [y] Sanity check Note: I noticed couple of display bugs on forum discussion and post pages that needs to be addressed on separate issue ( MDL-42682 ).
            Hide
            Damyon Wiese added a comment -

            Thanks Andrew,

            Integrated to master only. Tested in RTL and LTR and seems to work for me (but more testing is required).

            Show
            Damyon Wiese added a comment - Thanks Andrew, Integrated to master only. Tested in RTL and LTR and seems to work for me (but more testing is required).
            Hide
            Damyon Wiese added a comment -

            Note: This doesn't seem to happen on 25 so no backport required.

            Show
            Damyon Wiese added a comment - Note: This doesn't seem to happen on 25 so no backport required.
            Hide
            Ankit Agarwal added a comment -

            Tested with a phone on different pages. Works as described.

            Thanks

            Show
            Ankit Agarwal added a comment - Tested with a phone on different pages. Works as described. Thanks
            Hide
            David Scotson added a comment -

            Mark Aberdour reported it as a problem with 2.5.1 a couple of months ago, does anyone else see it?

            Show
            David Scotson added a comment - Mark Aberdour reported it as a problem with 2.5.1 a couple of months ago, does anyone else see it?
            Hide
            Ann Adamcik added a comment -

            Yes, this is certainly an issue with 2.5.x.

            Show
            Ann Adamcik added a comment - Yes, this is certainly an issue with 2.5.x.
            Hide
            Eloy Lafuente (stronk7) added a comment -

            It's Friday, I'm tired so I won't be very imaginative today.

            No matter of that, yes, you did it! Thanks for your collaboration!

            Closing this as fixed!

            Show
            Eloy Lafuente (stronk7) added a comment - It's Friday, I'm tired so I won't be very imaginative today. No matter of that, yes, you did it! Thanks for your collaboration! Closing this as fixed!
            Hide
            Gareth J Barnard added a comment -

            Hi all,

            There is a typo in 'moodle/responsive.less' which has the selector '#region-main.span8.span8' which should read '#region-main.span8' as stated in the comment https://tracker.moodle.org/browse/MDL-40722?focusedCommentId=252082&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-252082 above. Will fix in MDL-44074.

            Gareth

            Show
            Gareth J Barnard added a comment - Hi all, There is a typo in 'moodle/responsive.less' which has the selector '#region-main.span8.span8' which should read '#region-main.span8' as stated in the comment https://tracker.moodle.org/browse/MDL-40722?focusedCommentId=252082&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-252082 above. Will fix in MDL-44074 . Gareth
            Hide
            Mary Evans added a comment -

            Good job I found that Gareth...

            Show
            Mary Evans added a comment - Good job I found that Gareth...
            Hide
            Gareth J Barnard added a comment -

            Absolutely Mary

            Show
            Gareth J Barnard added a comment - Absolutely Mary
            Hide
            Mary Evans added a comment -

            It's a wonder anything works!

            Show
            Mary Evans added a comment - It's a wonder anything works!
            Hide
            Gareth J Barnard added a comment -

            I think Moodle uses the 'force'.

            Show
            Gareth J Barnard added a comment - I think Moodle uses the 'force'.
            Hide
            Michael de Raadt added a comment -

            That makes you Jedi.

            Show
            Michael de Raadt added a comment - That makes you Jedi.
            Hide
            Mary Evans added a comment -

            This is still broken...

            Show
            Mary Evans added a comment - This is still broken...
            Hide
            Mary Evans added a comment -

            The CSS is all wrong for side blocks when less than 768px
            currently there is only provision for one side only in the @media (max-width: 768px)
            Also notice the .span8.span8 again?
             

              .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4,
              .empty-region-side-post.used-region-side-pre #region-main.span8.span8 {
                width: 100%;
                *width: 99.94680851063829%;
              }
            

            What it actually needs is this...
             

              .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4,
              .jsenabled.docked-region-side-post.used-region-side-pre #block-region-side-pre.span4,
              .empty-region-side-pre.used-region-side-post #block-region-side-post.span4,
              .jsenabled.docked-region-side-pre.used-region-side-post #block-region-side-post.span4{
                  width: 100%;
                  *width: 99.94680851063829%;
              }
            

            Show
            Mary Evans added a comment - The CSS is all wrong for side blocks when less than 768px currently there is only provision for one side only in the @media (max-width: 768px) Also notice the .span8.span8 again?   .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4, .empty-region-side-post.used-region-side-pre #region-main.span8.span8 { width: 100%; *width: 99.94680851063829%; } What it actually needs is this...   .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4, .jsenabled.docked-region-side-post.used-region-side-pre #block-region-side-pre.span4, .empty-region-side-pre.used-region-side-post #block-region-side-post.span4, .jsenabled.docked-region-side-pre.used-region-side-post #block-region-side-post.span4{ width: 100%; *width: 99.94680851063829%; }

              People

              • Votes:
                11 Vote for this issue
                Watchers:
                20 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Agile