Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust default Chosen width #3997

Open
joshuasosa opened this issue Jan 23, 2025 · 0 comments
Open

Adjust default Chosen width #3997

joshuasosa opened this issue Jan 23, 2025 · 0 comments

Comments

@joshuasosa
Copy link
Contributor

Problem/Motivation

After implementing #3966, the default Chosen width may appear too narrow.

Describe the bug

In some cases, the default width is too narrow for the dropdown select box enhanced with Chosen.

To Reproduce

Steps to reproduce the behavior:

  1. Go to Content > Add content > create Page.
  2. Click on "Menu settings" section and checkmark "Provide a menu link."
  3. Click open "Parent link" and observe Chosen's width is narrow.
  4. Compare with an existing Page that is in the menu.

Proposed resolution

Options to fix:
A. An issue and patch could be created for Chosen to change width to min-width in the CSS.
B. Minimum width could be set to a relative percentage (e.g., 30 with "Use relative width" enabled).
C. Minimum width could be unset and left blank, where width: auto will then get applied.
Or some combination of fixes.

Comment by @bberndt-uaz:

From some quick testing locally, I think we could leave that Chosen "Minimum width of widget" option blank (so the container would be set to width: auto) and then we could also override the .chosen-drop class to have width: max-content. That seemed to provide a good solution, although there might be a better one.

Expected behavior

Width of Chosen-based dropdown should adjust based on the content within the dropdown.

Screenshots

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant