Moodle
  1. Moodle
  2. MDL-39354

All checkboxes and radio buttons lacking padding

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 2.3.6, 2.4.3, 2.5
    • Fix Version/s: 2.3.7, 2.4.4
    • Component/s: Themes
    • Labels:
    • Testing Instructions:
      Hide

      1. Preview a multiple choice question. Verify that the checkboxes / radio buttons are not mashed up against the lable.

      2. Similar, but on the quiz settings form, in the Review options section.

      3. Go to Questoin bank -> export, and check out the layout of the top section of the form.

      4. Similar Admin -> Plugins -> Activity modules -> Quiz. Lots of checkboxes there. Are they OK?

      Retest in several themes (base, canvas, and just on 25 - clean).

      Show
      1. Preview a multiple choice question. Verify that the checkboxes / radio buttons are not mashed up against the lable. 2. Similar, but on the quiz settings form, in the Review options section. 3. Go to Questoin bank -> export, and check out the layout of the top section of the form. 4. Similar Admin -> Plugins -> Activity modules -> Quiz. Lots of checkboxes there. Are they OK? Retest in several themes (base, canvas, and just on 25 - clean).
    • Affected Branches:
      MOODLE_23_STABLE, MOODLE_24_STABLE, MOODLE_25_STABLE
    • Fixed Branches:
      MOODLE_23_STABLE, MOODLE_24_STABLE
    • Pull from Repository:
    • Pull 2.4 Branch:
    • Pull Master Branch:
    • Rank:
      49985

      Description

      This was reported to me in the context of multiple choice questions in the quiz, but it looks horrible everywhere, so I propose a blanket fix.

        Issue Links

          Activity

          Hide
          Tim Hunt added a comment -

          I am about to do a fix, then ask you to peer review it.

          Show
          Tim Hunt added a comment - I am about to do a fix, then ask you to peer review it.
          Hide
          Tim Hunt added a comment -

          OK, what do you think Mary?

          Show
          Tim Hunt added a comment - OK, what do you think Mary?
          Hide
          Tim Hunt added a comment -

          Submitting for integration.

          Show
          Tim Hunt added a comment - Submitting for integration.
          Hide
          Damyon Wiese added a comment -

          Hi Tim, it looks like there is a rule for this in the canvas theme that should be removed:

          theme/canvas/style/core.css:

          input[type="checkbox"],                                                                                                             
          input[type="radio"] {                                                                                                               
              margin-right: 7px;                                                                                                              
          }        
          

          Also it would be great for a +1 from Mary.

          Show
          Damyon Wiese added a comment - Hi Tim, it looks like there is a rule for this in the canvas theme that should be removed: theme/canvas/style/core.css: input[type= "checkbox" ], input[type= "radio" ] { margin-right: 7px; } Also it would be great for a +1 from Mary.
          Hide
          CiBoT added a comment -

          Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.

          Show
          CiBoT added a comment - Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.
          Hide
          Tim Hunt added a comment -

          Yes, I think a +1 from Mary would be good too, but what do we do if she won't look?

          Show
          Tim Hunt added a comment - Yes, I think a +1 from Mary would be good too, but what do we do if she won't look?
          Hide
          Joseph Rézeau added a comment -

          Hi Tim et al,
          This fix is looking good.
          Whilst we are improving the display of buttons & checkboxes, may I suggest a further enhancement, to indent longish multi-line texts in the multichoice questions (involving radio buttons or checkboxes).
          In mod/quiz/styles.css, add:

          #page-mod-quiz-attempt input[type=radio],
          #page-mod-quiz-attempt input[type=checkbox]
          {float: left;}
          #page-mod-quiz-attempt .que.multichoice label 
          {display: block; margin-left: 1.5em;}

          See result in attached screenshot.

          Show
          Joseph Rézeau added a comment - Hi Tim et al, This fix is looking good. Whilst we are improving the display of buttons & checkboxes, may I suggest a further enhancement, to indent longish multi-line texts in the multichoice questions (involving radio buttons or checkboxes). In mod/quiz/styles.css, add: #page-mod-quiz-attempt input[type=radio], #page-mod-quiz-attempt input[type=checkbox] { float : left;} #page-mod-quiz-attempt .que.multichoice label {display: block; margin-left: 1.5em;} See result in attached screenshot.
          Hide
          Tim Hunt added a comment -

          Right, good catch Damyon. I decided to change my code, and instead just move the rule from canvas -> base. The canvas rule has been tried and tested in many sub-themes.

          I have now done a search for 'checkbox' in the whole themes directly, and cannot see anything else that might need to be chanced in relation to this.

          Commit amended an all three branches.

          Mary, would be great to get a +1 from you so this can be integrated. Thanks.

          Show
          Tim Hunt added a comment - Right, good catch Damyon. I decided to change my code, and instead just move the rule from canvas -> base. The canvas rule has been tried and tested in many sub-themes. I have now done a search for 'checkbox' in the whole themes directly, and cannot see anything else that might need to be chanced in relation to this. Commit amended an all three branches. Mary, would be great to get a +1 from you so this can be integrated. Thanks.
          Hide
          Mary Evans added a comment - - edited

          +1

          About time too! Is what I have to say about that. I was actually looking at this myself recently, but got side-tracked.

          7px seems a bit much though. would 3px or 5px not do? Also, is it margin-right correct. If some text were to the left of the checkbox. Like Click here[] adding a margin to the right would put the margin after the checkbox wouldn't it?

          Oh I see Joseph has said much the same.

          By the way, if this is intended for your Quiz only then you need to state this in the CSS

          #page-mod-quiz-attempt input[type=radio],
          #page-mod-quiz-attempt input[type=checkbox]{
              margin-right: 1.5em;
          }
          
          OR
          
          #page-mod-quiz-attempt .que.multichoice label {
              display: block; margin-left: 1.5em;
          }
          
          Show
          Mary Evans added a comment - - edited +1 About time too! Is what I have to say about that. I was actually looking at this myself recently, but got side-tracked. 7px seems a bit much though. would 3px or 5px not do? Also, is it margin-right correct. If some text were to the left of the checkbox. Like Click here[] adding a margin to the right would put the margin after the checkbox wouldn't it? Oh I see Joseph has said much the same. By the way, if this is intended for your Quiz only then you need to state this in the CSS #page-mod-quiz-attempt input[type=radio], #page-mod-quiz-attempt input[type=checkbox]{ margin-right: 1.5em; } OR #page-mod-quiz-attempt .que.multichoice label { display: block; margin-left: 1.5em; }
          Hide
          Joseph Rézeau added a comment -

          @Mary "By the way, if this is intended for your Quiz only then you need to state this in the CSS"
          But that's what I wrote.

          Show
          Joseph Rézeau added a comment - @Mary "By the way, if this is intended for your Quiz only then you need to state this in the CSS" But that's what I wrote.
          Hide
          Tim Hunt added a comment -

          Well, 7px is what Patrick did in Canvas theme. He is a professional graphic designer. I am not.

          I think more often, the checkbox is the fist thing on the line, so it is better for everything to be left-aligned properly.

          If you tell me a specific change to make, I will do it. 3 or 5px is not helpful at this stage.

          I think fixing other aspects of multi-choice layout is a separate thing. If we do that, it should be a separate issue.

          Show
          Tim Hunt added a comment - Well, 7px is what Patrick did in Canvas theme. He is a professional graphic designer. I am not. I think more often, the checkbox is the fist thing on the line, so it is better for everything to be left-aligned properly. If you tell me a specific change to make, I will do it. 3 or 5px is not helpful at this stage. I think fixing other aspects of multi-choice layout is a separate thing. If we do that, it should be a separate issue.
          Hide
          Mary Evans added a comment -

          Sorry Joseph...I was just explaining to Tim. I did mention you had written the same.
          What I mean to say is that the way you explained is the correct way. I did not need to copy it. Sorry for that confusion.

          7px is OK.

          Show
          Mary Evans added a comment - Sorry Joseph...I was just explaining to Tim. I did mention you had written the same. What I mean to say is that the way you explained is the correct way. I did not need to copy it. Sorry for that confusion. 7px is OK.
          Hide
          Tim Hunt added a comment -

          Thanks Mary. Re-submitting for integration.

          Show
          Tim Hunt added a comment - Thanks Mary. Re-submitting for integration.
          Hide
          Joseph Rézeau added a comment -

          Tim "I think fixing other aspects of multi-choice layout is a separate thing. If we do that, it should be a separate issue."
          I've created MDL-39420 for it.

          Show
          Joseph Rézeau added a comment - Tim "I think fixing other aspects of multi-choice layout is a separate thing. If we do that, it should be a separate issue." I've created MDL-39420 for it.
          Hide
          Damyon Wiese added a comment -

          Thanks Tim, Mary and Joseph.

          This has been integrated to 23, 24 and master. I added an extra commit to also make this change in bootstrapbase for 25 because we must keep this in sync.

          Show
          Damyon Wiese added a comment - Thanks Tim, Mary and Joseph. This has been integrated to 23, 24 and master. I added an extra commit to also make this change in bootstrapbase for 25 because we must keep this in sync.
          Hide
          Tim Hunt added a comment -

          No!

          bootstrapbase already styles checkboxes nicely. We to now want to replace their well thought out styles with our crappy hack!

          Show
          Tim Hunt added a comment - No! bootstrapbase already styles checkboxes nicely. We to now want to replace their well thought out styles with our crappy hack!
          Hide
          Damyon Wiese added a comment -

          Discussed with Tim on chat - bootstrap is not applying any margin left/right to checkbox/radios so the extra fix is correct. If there are any objections, please speak up.

          Show
          Damyon Wiese added a comment - Discussed with Tim on chat - bootstrap is not applying any margin left/right to checkbox/radios so the extra fix is correct. If there are any objections, please speak up.
          Hide
          Mary Evans added a comment -

          I'm not certain but I think Tim is right on this one. The chackboxes like lots of other elements inside a bootstrap theme are all covered. But I need to check this first.

          Show
          Mary Evans added a comment - I'm not certain but I think Tim is right on this one. The chackboxes like lots of other elements inside a bootstrap theme are all covered. But I need to check this first.
          Hide
          Mary Evans added a comment - - edited

          Just checked and can confirm padding is added to the checkbox/radio title as follows:

          .radio, .checkbox {
              min-height: 20px;
              padding-left: 20px;
          }
          

          ...providing the class selector is added to Moodle forms this will work / or should work in Bootstrapbase/Clean themes or should.

          #You can see this in the Twitter Bootstrap website ...

          http://twitter.github.io/bootstrap/base-css.html#forms

          Show
          Mary Evans added a comment - - edited Just checked and can confirm padding is added to the checkbox/radio title as follows: .radio, .checkbox { min-height: 20px; padding-left: 20px; } ...providing the class selector is added to Moodle forms this will work / or should work in Bootstrapbase/Clean themes or should. #You can see this in the Twitter Bootstrap website ... http://twitter.github.io/bootstrap/base-css.html#forms
          Hide
          Tim Hunt added a comment -

          Right, but at the moment, we don't automatically add those classes to all checkboxes ...

          Perhaps we need a new issue for the bootstrap part of this?

          Show
          Tim Hunt added a comment - Right, but at the moment, we don't automatically add those classes to all checkboxes ... Perhaps we need a new issue for the bootstrap part of this?
          Hide
          Mary Evans added a comment -

          Tim, I think David has been trying to fix these and other things in Moodle. So may be an idea for you to create a new tracker to monitor these changes.

          Thanks

          Show
          Mary Evans added a comment - Tim, I think David has been trying to fix these and other things in Moodle. So may be an idea for you to create a new tracker to monitor these changes. Thanks
          Hide
          Adrian Greeve added a comment -

          Tested on the 2.3, 2.4 and master integration branches.
          Checkboxes and radio buttons have adequate padding.
          Test passed.

          Show
          Adrian Greeve added a comment - Tested on the 2.3, 2.4 and master integration branches. Checkboxes and radio buttons have adequate padding. Test passed.
          Hide
          Dan Poltawski added a comment -

          Thanks! You're changes are now spread to the world through this git and our source control repositories.

          No time to rest though, we've got days to make 2.5 the best yet!

          ciao

          Show
          Dan Poltawski added a comment - Thanks! You're changes are now spread to the world through this git and our source control repositories. No time to rest though, we've got days to make 2.5 the best yet! ciao

            People

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

              Dates

              • Created:
                Updated:
                Resolved: