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

Chat input area patrially hidden by task bar

    Details

    • Type: Bug
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.2
    • Fix Version/s: None
    • Component/s: Themes
    • Testing Instructions:
      Hide

      https://docs.moodle.org/32/en/Chat_settings

      1. Using Boost theme go to a course and set up a Chat room (see: Chat Doc for instructions)
      2. Enter the Chat and add a comment into the message area at the bottom of the screen.
      3. Confirm that this message area is fully visible above the bottom line of the iframe container.
      Show
      https://docs.moodle.org/32/en/Chat_settings Using Boost theme go to a course and set up a Chat room (see: Chat Doc for instructions) Enter the Chat and add a comment into the message area at the bottom of the screen. Confirm that this message area is fully visible above the bottom line of the iframe container.
    • Affected Branches:
      MOODLE_32_STABLE

      Description

      Taking part in a Chat discussion group for Learn Moodle with Helen Foster and Mary Cooch, a user commented that the chat imput area was hidden by her computer's task bar. I found that this was true for of my Laptop computer screen.

      On testing and trying to discover the cause I found that the new class="p-y-l" in Boost theme, was the problem as it adds a 1rem padding to the top of every instance of that CSS selector within Moodle, which includes the chat-imput-area span.

      The fix for this is easy:
      #chat-input-area.box.p-y-1

      { padding-top: 0 !important; }

        Gliffy Diagrams

          Attachments

          1. chat input box.png
            chat input box.png
            5 kB
          2. chat input box(2).png
            chat input box(2).png
            5 kB
          3. image.jpeg
            image.jpeg
            1.72 MB
          4. image.jpeg
            image.jpeg
            1.47 MB

            Activity

            Hide
            cibot CiBoT added a comment -
            Show
            cibot CiBoT added a comment - Fails against automated checks. Checked MDL-57739 using repository: git://github.com/lazydaisy/moodle.git MOODLE_32_STABLE (2 errors / 1 warnings) [branch: MDL-57739-M32 | CI Job ] phplint (0/0) , phpcs (0/0) , js (0/0) , css (1/0) , phpdoc (0/0) , commit (0/0) , savepoint (0/0) , thirdparty (0/0) , grunt (1/1) , shifter (0/0) , travis (0/0) , mustache (0/0) , master (2 errors / 1 warnings) [branch: MDL-57739-master | CI Job ] phplint (0/0) , phpcs (0/0) , js (0/0) , css (1/0) , phpdoc (0/0) , commit (0/0) , savepoint (0/0) , thirdparty (0/0) , grunt (1/1) , shifter (0/0) , travis (0/0) , mustache (0/0) , Should these errors be fixed?
            Hide
            lazydaisy Mary Evans added a comment - - edited

            Damyon Wiese, Dan Poltawski
            What are we using to generate the SCSS in Boost theme?
            I mistakenly used 'grunt css' just now and all that did was create a new set of moodle.css and editor.css in bootstrabase. I then tried grunt scss which gave me an error message.

            Thanks
            Mary

            Show
            lazydaisy Mary Evans added a comment - - edited Damyon Wiese , Dan Poltawski What are we using to generate the SCSS in Boost theme? I mistakenly used 'grunt css' just now and all that did was create a new set of moodle.css and editor.css in bootstrabase. I then tried grunt scss which gave me an error message. Thanks Mary
            Hide
            damyon Damyon Wiese added a comment -

            Hi Mary,

            The SCSS compiler is built into Moodle and will run the first time the stylesheet is requested. This is why boost is slower than other themes with theme designer mode turned on. (But it's quicker than theme_more which does the same thing).

            Thanks for the patch - but we are not allowed to override bootstrap styles ever. If the p-y-1 class is incorrect it needs to be removed from the HTML - not left there and disabled by another style rule.

            In boost if anything requires more CSS the solution is probably not correct (there are exceptions). It is preferred to modify the markup and use the vanilla bootstrap classes to achieve the look you want. This approach will be far easier to maintain in the future.

            Show
            damyon Damyon Wiese added a comment - Hi Mary, The SCSS compiler is built into Moodle and will run the first time the stylesheet is requested. This is why boost is slower than other themes with theme designer mode turned on. (But it's quicker than theme_more which does the same thing). Thanks for the patch - but we are not allowed to override bootstrap styles ever. If the p-y-1 class is incorrect it needs to be removed from the HTML - not left there and disabled by another style rule. In boost if anything requires more CSS the solution is probably not correct (there are exceptions). It is preferred to modify the markup and use the vanilla bootstrap classes to achieve the look you want. This approach will be far easier to maintain in the future.
            Hide
            lazydaisy Mary Evans added a comment -

            OK...in that case I'll remove the class from the Chat element.

            Show
            lazydaisy Mary Evans added a comment - OK...in that case I'll remove the class from the Chat element.
            Hide
            lazydaisy Mary Evans added a comment -

            Easier said than done as the Boost adds the p-y-1 class to box within the generalbox renderer here:
            https://github.com/moodle/moodle/blob/master/theme/boost/classes/output/core_renderer.php#L53-L66

            Show
            lazydaisy Mary Evans added a comment - Easier said than done as the Boost adds the p-y-1 class to box within the generalbox renderer here: https://github.com/moodle/moodle/blob/master/theme/boost/classes/output/core_renderer.php#L53-L66
            Hide
            damyon Damyon Wiese added a comment -

            I don't know what to suggest because I can't reproduce any problems here. For me, the chat popup is pretty small already (about 500px high) and I don't see any padding above the text input (even with the p-y-1 class).

            It's true the pixel based CSS included with chat does not mix well with the flexible classes from bootstrap - the solution would be to remove all the CSS from chat and replace it with bootstrap classes. We did not have time to do this for every module before the last release and it won't likely be a priority unless we to a major overhaul of chat.

            Can you please add more detail explaining how to reproduce this specific problem?

            Show
            damyon Damyon Wiese added a comment - I don't know what to suggest because I can't reproduce any problems here. For me, the chat popup is pretty small already (about 500px high) and I don't see any padding above the text input (even with the p-y-1 class). It's true the pixel based CSS included with chat does not mix well with the flexible classes from bootstrap - the solution would be to remove all the CSS from chat and replace it with bootstrap classes. We did not have time to do this for every module before the last release and it won't likely be a priority unless we to a major overhaul of chat. Can you please add more detail explaining how to reproduce this specific problem?
            Hide
            lazydaisy Mary Evans added a comment - - edited

            You need to see the Chat box as a full page view.
            Helen Foster saw the problem and asked me to report it.
            I have no idea how the Chat was set up as I have never set one up myself.

            Show
            lazydaisy Mary Evans added a comment - - edited You need to see the Chat box as a full page view. Helen Foster saw the problem and asked me to report it. I have no idea how the Chat was set up as I have never set one up myself.
            Hide
            tsala Helen Foster added a comment -

            Hello,

            What I noticed was that the chat input box and Send button had padding (space) above it and at the sides, but not below.

            Show
            tsala Helen Foster added a comment - Hello, What I noticed was that the chat input box and Send button had padding (space) above it and at the sides, but not below.
            Hide
            lazydaisy Mary Evans added a comment -

            Helen Foster try adding this in you Boost theme Raw SCSS 2nd text area in Advanced settings...

            #chat-input-area.box.p-y-1

            { padding-top: 0 !important; }
            Show
            lazydaisy Mary Evans added a comment - Helen Foster try adding this in you Boost theme Raw SCSS 2nd text area in Advanced settings... #chat-input-area.box.p-y-1 { padding-top: 0 !important; }
            Hide
            tsala Helen Foster added a comment -

            Thanks Mary, I added the SCSS and it did indeed help.

            Show
            tsala Helen Foster added a comment - Thanks Mary, I added the SCSS and it did indeed help.

              People

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

                Dates

                • Created:
                  Updated: