Modal dialogue Views Messages breaks form usability

Created on 28 July 2020, over 4 years ago
Updated 5 February 2024, 11 months ago

Problem/Motivation

If Views message is present in the modal dialogue for Views settings it pushes the form content behind the form buttons and makes some of the form content inaccessible when the viewport height is too small to accomodate all content without the need for the vertical scrollbar (and then some, depending on the messages height).

Here is the case illustrated with Contextual filter settings:

I scroll the settings all the way down, but I can't access the More options at all!

When I delete the Views messages from HTML I can access all the form content in the modal dialogue because the form content scrollbar included aren't obscured by the form buttons, I can get to the More details:

Steps to reproduce

  1. Put your site under Maintenance to get the message to appear.
  2. Edit any Views,
  3. click on any Field settings, Title for example.
  4. Reduce the height of your browser until you can see the vertical scrollbar appear on the dialogue content, and then some. Scroll down the dialogue content to confirm that the last set of options isn't visible. It "disappears" behind the form buttons.
  5. There is a height of viewport you can hit that doesn't cause the scrollbar to appear yet, but the last option still becomes hidden.

Proposed resolution

Inline CSS calculation needs to take the Views messages height into consideration when setting the height of the form content.

It seems that the height needs to be adjusted for the element with the data-drupal-selector="edit-options", reduced by some 65 px for a one-line Message. Messages have max-height: 200px;.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Views UI 

Last updated 21 days ago

Created by

🇭🇷Croatia portulaca

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024