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

max-width property on ADD BLOCK select element not working correctly

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.9.1, 3.0.6, 3.1.2, 3.2
    • Fix Version/s: 3.0.7, 3.1.3
    • Component/s: Themes
    • Labels:
    • Testing Instructions:
      Hide
      1. Using Clean theme, enable editing in a course so that the "Add-Block" block is shown.
      2. Check to see that the 'select' element sits in the block with equal distance from the side of the block contents.
      3. Reduce the size of your screen and check to see that the select element does not overlap the borders of the block.
      Show
      Using Clean theme, enable editing in a course so that the "Add-Block" block is shown. Check to see that the 'select' element sits in the block with equal distance from the side of the block contents. Reduce the size of your screen and check to see that the select element does not overlap the borders of the block.
    • Affected Branches:
      MOODLE_29_STABLE, MOODLE_30_STABLE, MOODLE_31_STABLE, MOODLE_32_STABLE
    • Fixed Branches:
      MOODLE_30_STABLE, MOODLE_31_STABLE
    • Pull 3.1 Branch:
      MDL-51633_M31
    • Pull Master Branch:
      MDL-51633_master

      Description

      If you enable editing in a course so the add-block block will be shown and then reduce the size of your screen you will see that the select element will overlap the borders of the block.

      This is not a big deal when using a standard theme, as this only happens on screen sizes a few pixel wider than the threshold for the switch from the three- to the one-column layout. But it becomes a problem, when you either use custom css or a custom theme to modify the width of the block-columns.

      The problem seems to be that the max-width property applied to the select element will use the width of the longest option element enclosed in the select. The max-width property will only work correctly (i.e. use only 92% of the space available in the block, as defined by bootsprapbase) if you set a width of 100% to the select element itself.

      I fixed this in my custom theme by applying the following styles:

      Unable to find source-code formatter for language: css. Available languages are: actionscript, html, java, javascript, none, sql, xhtml, xml
      /* set width on select, remove max-width */
      .block .singleselect select.singleselect {
          width: 100%;
          max-width: none;
      }
      

      (The specific selector is required to override the one defining the max-width.)

        Gliffy Diagrams

          Attachments

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  14/Nov/16