Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-41713

Forums: Wide content causes horizontal scrollbars on mobile

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: CLOSED
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 11.4, 20.0
    • Fix Version/s: 19.4, 20.0
    • Component/s: Forums Tool
    • Labels:
    • 19 status:
      Verified
    • Test Plan:
      Hide

      Setup:

      1. In a text editor of your choosing, paste a block of text of more than 200 words
      2. Using the text editor's "Find and Replace" feature, find all of the spaces and replace them with 
         
      3. Copy this block of text
      4. In Forums, go to or create a conversation
      5. In the conversation, create a post containing the block of text that you just edited
      6. Reply to this post with the original block of text (from before you replaced the spaces)
      7. Search the web for an image of your choosing that is larger than the width of your screen or normal web browser window
      8. Reply to the last post by including this image in your post
        1. In the CKEditor, click the "Image" icon
        2. In the "URL" field, paste the link to the image that you found
        3. Click the "OK" button
        4. Optional: type additional text before or after the image in this post
        5. Post the message

      Testing:

      • As various Sakai roles (e.g. Instructor, Student, etc), navigate Forums by going to the various pages and views for the conversation and the posts that you created in the setup section above
        • Navigate using various screen sizes (e.g. narrow and wide browsers sizes) and browsers (e.g. Firefox, Chrome, Safari, Edge)
      • Ensure the image doesn't go larger than your window size
      • Ensure the block of non-breaking spaces (the post with the spaces replaced with  ) doesn't cause the page to get wider than the screen
      • Ensure the conversation is readable
      • Ensure you can post to the conversation and it still looks proper
      • Create a new conversation with various lengths of posts and ensure they look proper/normal still
      Show
      Setup : In a text editor of your choosing, paste a block of text of more than 200 words Using the text editor's "Find and Replace" feature, find all of the spaces and replace them with   Copy this block of text In Forums, go to or create a conversation In the conversation, create a post containing the block of text that you just edited Reply to this post with the original block of text (from before you replaced the spaces) Search the web for an image of your choosing that is larger than the width of your screen or normal web browser window Reply to the last post by including this image in your post In the CKEditor, click the "Image" icon In the "URL" field, paste the link to the image that you found Click the "OK" button Optional: type additional text before or after the image in this post Post the message Testing : As various Sakai roles (e.g. Instructor, Student, etc), navigate Forums by going to the various pages and views for the conversation and the posts that you created in the setup section above Navigate using various screen sizes (e.g. narrow and wide browsers sizes) and browsers (e.g. Firefox, Chrome, Safari, Edge) Ensure the image doesn't go larger than your window size Ensure the block of non-breaking spaces (the post with the spaces replaced with  ) doesn't cause the page to get wider than the screen Ensure the conversation is readable Ensure you can post to the conversation and it still looks proper Create a new conversation with various lengths of posts and ensure they look proper/normal still

      Description

      We received multiple reports from students saying it was difficult to read some Forums threads because they had to scroll sideways to read each sentence or paragraph.

      Upon investigation, I noticed that the table-responsive CSS class from Bootstrap was applied to most tables in Forums. This added horizontal scrollbars to the whole table, which weren't always visible if the table was longer than the screen and would allow the whole table to expand past the viewport width if a cell (e.g. a forum post) was wider than the screen.

      This fix ensures that:

      • images are constrained to the screen width whenever possible
      • textual content containing non-breaking spaces don't affect other threaded posts in the conversation
      • navigational controls don't cause the table to be larger than the screen
      • the various views and pages in Forums takes these factors into consideration

        Gliffy Diagrams

          Zeplin

            Attachments

            1. 01-forumsWide-before.png
              01-forumsWide-before.png
              717 kB
            2. 02-forumsWide-after.png
              02-forumsWide-after.png
              702 kB
            3. 03-forumsNarrow-before.png
              03-forumsNarrow-before.png
              100 kB
            4. 04-forumsNarrow-after.png
              04-forumsNarrow-after.png
              65 kB
            5. 05-forumsNarrow-afterMore.png
              05-forumsNarrow-afterMore.png
              186 kB

              Issue Links

              relates to

              Bug - A problem which impairs or prevents functionality of the product. SAK-41955 MS Edge - Forums: Wide content causes horizontal scrollbars

              • Major - Major loss of function or need for functionality in production in the near future.
              • Awaiting Review

                Activity

                  People

                  Assignee:
                  sfoster9 Shawn Foster
                  Reporter:
                  sfoster9 Shawn Foster
                  Votes:
                  0 Vote for this issue
                  Watchers:
                  4 Start watching this issue

                    Dates

                    Created:
                    Updated:
                    Resolved:

                      Git Integration