jquery-ui icon indicating copy to clipboard operation
jquery-ui copied to clipboard

Published 20 hours ago • verified publisher icon jquery

Fix autocomplete when used in bootstrap modal

Open ejohnson-dotnet opened this issue 2 years ago • 4 comments

Right now, the bootstrap modal dialogs use a z-index of 1055, so the autocomplete list shows behind the dialog. https://github.com/twbs/bootstrap/blob/a9b34450601b017b27cacd9ff750aa9c12aac82c/scss/_variables.scss#L1042

This change will put the z-index that will work with bootstrap and align with the bootstrap toast z-index.

ejohnson-dotnet avatar Mar 04 '22 15:03 ejohnson-dotnet

CLA Signed

The committers are authorized under a signed CLA.

  • :white_check_mark: Eric Johnson (c8a84aa7bde3f3efbf9c01965c7fedc09c8c40d3)

linux-foundation-easycla[bot] avatar Mar 04 '22 15:03 linux-foundation-easycla[bot]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

fnagel avatar Mar 09 '22 16:03 fnagel

@ejohnson-dotnet Uhhh we can't just change the z-index CSS statement that is used for ALL stack related stuff in UI. This will pretty sure a breaking change for most users. It even breaks the tests. I guess this is something you will need to fix for your specific use case.

fnagel avatar Mar 09 '22 16:03 fnagel

Sure I get it. I was just trying to find a fix for this issue. I have fixed it locally for my project. It just means I need to always edit the z-index for jquery-ui when updating. I know others have the same problem too. The root cause is that Bootstrap has chosen a value of 1050 for the modal z-index. jquery-ui has chosen a value of 100 for the z-index. The tests for jquery-ui failed because the test is simply hardcoding 100 also. If there is a better solution that would be great. Thanks for looking at it at least.

ejohnson-dotnet avatar Mar 10 '22 03:03 ejohnson-dotnet