View dropbutton breaking UI if content is long

Created on 9 February 2024, over 1 year ago

Problem/Motivation

Dropbutton field in view breaks the UI of page if the body content is too long. it shows correctly inside view preview but if you check the view page you see extremely long button going off the page. (checked this in olivero theme idk if the same happens in any other themes).

Steps to reproduce

  1. Create few nodes either article or basic page with long text in body.
  2. Create a content view page with default settings.
  3. In page display settings select unformatted list/grid/html list with fileds and save it.
  4. In view settings, add content body field with formatter set to summary or trimmed and trimmed limit set to >= 250. keep all other default settings.
  5. In view settings, add global dropbutton and check title and body under fields and keep all other default settings
  6. save the view and check the view page.

Proposed resolution

changing the width of dropdown button will help fix the issue on desktop and mobile devices.

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
Olivero 

Last updated about 5 hours ago

Created by

🇮🇳India TanujJain-TJ

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @TanujJain-TJ
  • Issue was unassigned.
  • Status changed to Needs review over 1 year ago
  • Pipeline finished with Failed
    over 1 year ago
    Total: 479s
    #91290
  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States smustgrave

    Appeared to cause a test failure. But would also like submaintainer thought.

  • I was checking the issue and found some more issues related to the dropdown field in Views -

    1. Padding issue in view content -

    2. toggle icon height issue -

  • Pushed the code for pointer 1

  • Pipeline finished with Failed
    over 1 year ago
    Total: 501s
    #92772
  • 🇮🇳India ahsannazir

    I am not able to reproduce the issue. Attaching screenshots for reference

  • Status changed to Needs review 12 months ago
  • Status changed to Needs work 12 months ago
  • 🇺🇸United States smustgrave

    Think issue summary should be updated about why 9px was used. Feel that's a fix that was tested at a specific breakpoint or monitor.

  • 🇮🇳India ahsannazir

    I believe 9px was used because same value has been used on

    dropbutton a

    . I checked the multiple breakpoints and i see that padding is same across all breakpoints similar to the

    dropbutton a
  • Status changed to Needs review 12 months ago
  • Status changed to RTBC 12 months ago
  • 🇮🇳India sdhruvi5142

    Hi,
    I've verified and tested MR!6525 and applied patch successfully on 11.x Version the changes are working as expected.

    Following steps I followed:
    1. Install Olivero Theme
    2. Create few nodes either article or basic page with long text in body.
    3. Create a content view page with default settings.
    4. In page display settings select unformatted list/grid/html list with fileds and save it.
    5. In view settings, add content body field with formatter set to summary or trimmed and trimmed limit set to >= 250. keep all other default settings.
    6. In view settings, add global dropbutton and check title and body under fields and keep all other default settings
    save the view and check the view page.
    7. Observed the changes here

    Testing Result:
    After applying the patch following issues are working fine.
    1. Width of the dropdown box isn't going beyond the page
    2. Padding are looking proper
    3. Dropdown Icon Height is also looking proper

    Attaching the photos for reference.

    Hence moving to RTBC!
    Thanks

  • 🇫🇷France nod_ Lille

    Can I have a screenshot of how it looks before/after when the dropdown is opened?

  • Status changed to Needs review 10 months ago
  • Status changed to Needs work 10 months ago
  • Status changed to Needs review 10 months ago
  • Hi,

    I have tried to reproduce the issue by follwing these steps-

    1. Create few nodes either article or basic page with long text in body.
    2. Create a content view page with default settings.
    3. In page display settings select unformatted list/grid/html list with fileds and save it.
    4. In view settings, add content body field with formatter set to summary or trimmed and trimmed limit set to >= 250. keep all other default settings.
    5. In view settings, add global dropbutton and check title and body under fields and keep all other default settings
    6. save the view and check the view page.

    but i couldn't reproduce also i checked the code found width:100% on dropdown-widget class if i change it back to max-content overlapping shows so i guess issue is fixed now. attached screenshot before and after.

  • I have added more screenshots for dropdown open state before and after please check.

  • Status changed to Postponed: needs info 10 months ago
  • 🇺🇸United States smustgrave

    If not able to reproduce it shouldn't be in review.

    Is this still an issue for people in 11.x?

  • 🇺🇸United States smustgrave

    Bumping 1 more time.

Production build 0.71.5 2024