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

Horizontal choices should use inline-block style

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.4.3, 2.5
    • Fix Version/s: 2.6
    • Component/s: Choice
    • Labels:
    • Testing Instructions:
      Hide

      In both Standard and Clean:

      1. Create a Choice module with horizontal display mode and at least three responses of 20 or more characters.
      2. Verify that when list options need to wrap options are moved to newlines with both option and label.
      Show
      In both Standard and Clean: Create a Choice module with horizontal display mode and at least three responses of 20 or more characters. Verify that when list options need to wrap options are moved to newlines with both option and label.
    • Affected Branches:
      MOODLE_24_STABLE, MOODLE_25_STABLE
    • Fixed Branches:
      MOODLE_26_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-38759-master

      Description

      Currently, if you choose to use the horizontal layout the choices are laid out as if they were one long string of text and any word gap will be used to break the line.

      It would be better if "display: inline-block" was used instead. In this case if we run out of room on one line it will split in between the different options, and a new line will always start with a radio button and a new option.

      This is particularly relevant on small screen mobile devices, where line-wrapping is more likely.

      The style is set on line 18 of mod/choice/styles.css

      https://github.com/moodle/moodle/blob/master/mod/choice/styles.css#L18

      It's probably like this for historical reasons. IE7 didn't support inline-block.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    18/Nov/13