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

Multi select drop down list box not rendered correctly in Chrome and Edge #5493

Closed
jab60 opened this issue Sep 21, 2023 · 3 comments
Closed
Labels
bug Undesired behaviour confirmed Bug is confirm by dev team resolved A fixed issue
Milestone

Comments

@jab60
Copy link
Contributor

jab60 commented Sep 21, 2023

Describe the bug

The multi select drop down box for option Selective Plugin Debug is not rendered correctly in Chrome.
Applies to Chrome and Edge. In Firefox the box is correctly rendered..
It appears the width of the header where the search, check all and uncheck all items is displayed is too narrow and they overflow onto the actual list items.
In other places where a multi select drop down is used it appears to render correctly

To Reproduce

Steps to reproduce the behavior:

  1. Go to Configuration>>Settings>>General

  2. Click on Select Plugins by Selective Plugin Debug

  3. No error reported this is a visual display issue see screenshots

Expected behavior

The drop down header bar should appear the same as for the select files multi drop down just above

Screenshots

Screenshot from chrome browser incorrectly rendered
image

Screenshot from Firefox browser correctly rendered
image

Maybe related as its both Chrome and Firefox on test system with no plugins the background is also transparent
image

After installing the thresholds plugin on the test system the background is no longer transparent but original render issue still apparent

Desktop (please complete the following information)

  • OS: W10 22H2

  • cacti 1.2.25 running on Ubuntu 22.04

  • Browser [e.g. chrome, safari]

  • Chrome Version 117.0.5938.89 (Official Build) (64-bit)

  • Firefox 117.0.1 (64-bit)

Smartphone (please complete the following information)

  • Not tested

Additional context

Add any other context about the problem here.

@jab60 jab60 added bug Undesired behaviour unverified Some days we don't have a clue labels Sep 21, 2023
@jab60
Copy link
Contributor Author

jab60 commented Sep 21, 2023

This appears to be related to the drop down list auto sizing based on the max character length from each item in the array, and when the array is empty the max length is zero which it dosent like hence the transparent rendering.
Because the plugin names are generally short the calculated width is not large enough to accommodate the header elements

As a temporary workaround
In file include/global_settings.php:
At line 66 add below to force at least 1 item in the array to be sufficiently wide
/* Add line below to force the auto computed header width on the multi select drop down to be wide enough */
$logplugins += array('text to force auto size header');

TheWitness added a commit that referenced this issue Sep 22, 2023
Multi select drop down list box not rendered correctly in Chrome and Edge
@TheWitness TheWitness added resolved A fixed issue confirmed Bug is confirm by dev team and removed unverified Some days we don't have a clue labels Sep 22, 2023
@TheWitness TheWitness added this to the 1.2.26 milestone Sep 22, 2023
@TheWitness
Copy link
Member

Thanks for reporting!

@jab60
Copy link
Contributor Author

jab60 commented Sep 22, 2023

Backported your fix to 1.2.25 and confirmed it works.
Many thanks

TheWitness added a commit that referenced this issue Sep 23, 2023
Multi select drop down list box not rendered correctly in Chrome and Edge
@github-actions github-actions bot locked and limited conversation to collaborators Dec 22, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Undesired behaviour confirmed Bug is confirm by dev team resolved A fixed issue
Projects
None yet
Development

No branches or pull requests

2 participants