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

Checkboxes/Radio Buttons within multiple choice questions become invisible or shrink

    XMLWordPrintable

Details

    • MOODLE_310_STABLE, MOODLE_311_STABLE, MOODLE_39_STABLE
    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MDL-71366-311
    • MDL-71366-master
    • Hide

      Please test this in all supported Browsers for Moodle

      Test the checkbox sizes

      1. Login as admin
      2. Create a new quiz
      3. Import the quiz backup attached to this issue
      4. Attempt the quiz
      5. Verify the checkboxes for the answers are all the same size

      See screenshot below:

      Test the scrolling behaviour

      1. Attempt the quiz
      2. Verify the question answers show a scrollbar
      3. Verify you can use the scrollbar to see the whole question text.
      4. Verify that there is no scrollbar for text that can be broken into a new line (text that contains spaces) in question 3

       

       

       

       

      Show
      Please test this in all supported Browsers for Moodle Test the checkbox sizes Login as admin Create a new quiz Import the quiz backup attached to this issue Attempt the quiz Verify  the checkboxes for the answers are all the same size See screenshot below: Test the scrolling behaviour Attempt the quiz Verify the question answers show a scrollbar Verify you can use the scrollbar to see the whole question text. Verify that there is no scrollbar for text that can be broken into a new line (text that contains spaces) in question 3        

    Description

      When creating multiple-choice question with a long non breaking answer (for example a long <code> segment), the checkboxes/radiobuttons might resize such that their width gets reduced to zero. Therefore this can cause users to not see the checkbox/radiobutton and be confused/unable to answer the quiz.

      This is due to the parent div of the checkboxes being a display: flex, and the inputs not having the correct style settings set. (As far as I understand flex, and skipping over [1]).
      This behavior happens in Chrome. It does not happen in Firefox. However, I believe this is not a Chrome bug.
       

      [1]: https://css-tricks.com/making-width-and-flexible-items-play-nice-together/

      Disclaimer: not sure about the affected version 3.10.3; I could reproduce the issue on https://sandbox.moodledemo.net/ and assume it runs on 3.10.3; I could only see that it runs 3.10, not which exact version. Version 3.9.6 is deployed by my University.

      Attachments

        Issue Links

          Activity

            People

              basbrands Bas Brands
              snhebrok Sven Hebrok
              Tim Hunt Tim Hunt
              Adrian Greeve Adrian Greeve
              Gladys Basiana Gladys Basiana
              Tim Hunt, Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo
              Votes:
              0 Vote for this issue
              Watchers:
              12 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                12/Jul/21

                Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 5 hours, 11 minutes
                  5h 11m