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

Correct the block search form input sizing

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Development in progress
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.7
    • Fix Version/s: None
    • Component/s: Blocks
    • Testing Instructions:
      Hide

      Setup:

      1. Log in as admin.
      2. Set the theme to Classic.

      Test:

      1. While still logged in as admin, navigate to the dashboard.
      2. Scroll down to the search form in the administration block.
      3. Ensure the browser window is full screen.
      4. CONFIRM the input width is appropriate for the block width, there is a small space between the input and the search button, and the input and button both align.
      5. Adjust the browser window size progressively smaller, and CONFIRM at all screen sizes, the input appears correctly aligned and spaced, with an appropriate text input width.

      Note: The following are examples of the intended display configurations:

      Show
      Setup: Log in as admin. Set the theme to Classic. Test: While still logged in as admin, navigate to the dashboard. Scroll down to the search form in the administration block. Ensure the browser window is full screen. CONFIRM the input width is appropriate for the block width, there is a small space between the input and the search button, and the input and button both align. Adjust the browser window size progressively smaller, and CONFIRM at all screen sizes, the input appears correctly aligned and spaced, with an appropriate text input width. Note: The following are examples of the intended display configurations:
    • Affected Branches:
      MOODLE_37_STABLE
    • Pull Master Branch:
      MDL-65455-master

      Description

      The search form template's input is a fixed width of 10, which is far smaller than the width available to wider screen sizes.

      The search button also does not align with the input at certain screen sizes, or have any padding between itself and the input.

      My suggested approach is to use Bootstrap classes to adjust the input width, and add some border between the two elements. This will also allow the search button to be pushed onto the following line when the screen size decreases, and the button will retain a small space between it and the input in both positions.

      I am treating this as a bug, because it appears to only affect the administration block in Bootstrap 4 themes, which will mean it currently only affects the Classic theme within core (and will be a regression in behaviour from the way the form appeared in Clean).

       

      Update: There is a lot of inconsistency between blocks with input/button combinations (eg site admin search, blog menu, global search), so they should be made consistent within this issue where possible, so we don't just fix one, when others have the same (or worse) layout problems.

       

        Attachments

          Activity

            People

            • Assignee:
              michaelh Michael Hawkins
              Reporter:
              michaelh Michael Hawkins
              Peer reviewer:
              Bas Brands
              Participants:
              Component watchers:
              Adrian Greeve, Mihail Geshoski, Peter Dias
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:

                Time Tracking

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 hours, 30 minutes
                4h 30m