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

Bootstrap input group HTML broken if used on admin settings pages

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.6
    • Fix Version/s: None
    • Labels:
      None
    • Affected Branches:
      MOODLE_36_STABLE

      Description

      I was using the Bootstrap 4 .input-group-prepend class on a custom admin setting and it was behaviing oddly at narrow sizes, rather than shrinking as if one component, it was breaking across two lines. I traced it back to a line of CSS setting the width of text inputs with size to "auto" which was added in 3.2 for RTL reasons.

      scss/moodle/forms.scss
      55:#adminsettings .form-control[size] {

      https://getbootstrap.com/docs/4.0/components/input-group/

      MDL-57524 is the RTL issue, and there was another issue about the same thing, just that the inputs were too wide.

      Those changes were made before Bootstrap 4 final and it's adoption of flexbox though.

      I think the Bootstrap 4 solution for this might be to wrap the items in .col-auto if you want them to auto-size based on the size attribute:

      https://getbootstrap.com/docs/4.0/components/forms/#auto-sizing

      I don't think any core code is affected by this issue, the only use of the -append and -prepend classes was in search templates that aren't used in admin settngs.

       

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              bawjaws David Scotson
              Participants:
              Component watchers:
              Jake Dallimore, Jun Pataleta, Ryan Wyllie, Amy Groshek, David Scotson, Amaia Anabitarte, Bas Brands, Carlos Escobedo, Sara Arjona (@sarjona), Víctor Déniz Falcón, Amaia Anabitarte, Bas Brands, Carlos Escobedo, Sara Arjona (@sarjona), Víctor Déniz Falcón
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated: