Moodle
  1. Moodle
  2. MDL-38759

Horizontal choices should use inline-block style

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Minor 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
    • Rank:
      48818

      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.

        Issue Links

          Activity

          Hide
          Dan Marsden added a comment -

          thanks for the report - feel free to attach a patch

          Show
          Dan Marsden added a comment - thanks for the report - feel free to attach a patch
          Hide
          Gareth J Barnard added a comment -

          This was sparked by 'https://tracker.moodle.org/secure/attachment/31904/choice_inline.png' on MDL-38729.

          Show
          Gareth J Barnard added a comment - This was sparked by 'https://tracker.moodle.org/secure/attachment/31904/choice_inline.png' on MDL-38729 .
          Hide
          Charles Fulton added a comment -

          Patch attached which implements the proposed fix. Did some quick testing in Standard and Clean in current master and verified that the list elements stack properly.

          Show
          Charles Fulton added a comment - Patch attached which implements the proposed fix. Did some quick testing in Standard and Clean in current master and verified that the list elements stack properly.
          Hide
          David Scotson added a comment - - edited

          Unrelated to this particular fix, but looking at the diff reminded me yet again that the CSS in Moodle is very poorly formatted, which makes it harder to read and diff changes so I created MDL-40855.

          Show
          David Scotson added a comment - - edited Unrelated to this particular fix, but looking at the diff reminded me yet again that the CSS in Moodle is very poorly formatted, which makes it harder to read and diff changes so I created MDL-40855 .
          Hide
          David Scotson added a comment -

          Also, I was going to add this to the Mobile Issues Epic thing (MDL-39665), but it seems I have the right to create new Epic tasks, but not to add existing things to the same place (or the UI to do so is very well hidden).

          Show
          David Scotson added a comment - Also, I was going to add this to the Mobile Issues Epic thing ( MDL-39665 ), but it seems I have the right to create new Epic tasks, but not to add existing things to the same place (or the UI to do so is very well hidden).
          Hide
          Dan Poltawski added a comment -

          Thanks for the patch Charles, looks good and i'm sending it for integration

          Show
          Dan Poltawski added a comment - Thanks for the patch Charles, looks good and i'm sending it for integration
          Hide
          Sam Hemelryk added a comment -

          Thanks guys - this has been integrated now.

          Show
          Sam Hemelryk added a comment - Thanks guys - this has been integrated now.
          Hide
          Jason Fowler added a comment -

          Thanks Charles - this is great.

          Show
          Jason Fowler added a comment - Thanks Charles - this is great.
          Hide
          Sam Hemelryk added a comment -

          Against all probability we've achieved normality. You changes didn't break the tests I pretended to run and are now immortalised upstream. Good for you!

          "It was a programming technique that had been reverse-engineered from the sort of psychotic mental blocks that otherwise perfectly normal people had been observed invariably to develop when elected to high political office."
          Adams, D (1992) Mostly Harmless. London: William Heinemann.

          Show
          Sam Hemelryk added a comment - Against all probability we've achieved normality. You changes didn't break the tests I pretended to run and are now immortalised upstream. Good for you! "It was a programming technique that had been reverse-engineered from the sort of psychotic mental blocks that otherwise perfectly normal people had been observed invariably to develop when elected to high political office." Adams, D (1992) Mostly Harmless. London: William Heinemann.

            People

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

              Dates

              • Created:
                Updated:
                Resolved: