apex select2 插件不适用于 oracle apex 20.1答案

【问题标题】：apex select2 plugin not work well with oracle apex 20.1apex select2 插件不适用于 oracle apex 20.1
【发布时间】：2020-10-28 16:55:13
【问题描述】：

需要在我的 oracle apex 表单中添加一个多选项目。尝试使用 apex select2 plugin. 但效果不佳。当我添加到表单中时，如下图所示，

然后我尝试在使用 js 加载页面时更改样式。但我无法访问 select2 项目的内部组件。有没有其他类似的插件..？如何在我的 apex 应用程序中使用此组件。？有什么建议吗？

【问题讨论】：

您是否尝试联系插件作者？
不，亲爱的。我没有……
您的标题显示apex 21.1，但您的标签显示apex 19.2 - 您使用的是哪一个？甚至还有2021版本吗？请注意19.2 引入了一个大大改进的Popup LOV 项目类型，它支持多选以及其他很酷的功能。我过去确实使用过select2，但最近切换到内置项目类型。
@ThomasTschernich 谢谢亲爱的。我的错。应该是 20.1。我选择了 19.2，因为还没有 20.1 的标签。所以我选择了最接近的一个.. :)
oracle-apex-20.1 标签创建和添加

标签： css styles oracle-apex multi-select oracle-apex-20.1

【解决方案1】：

您可以将 Select2 插件与 Universal Theme 一起使用，但当前版本不适用于 “Optional - Floating” / “Required - Floating” 项模板。

我总是使用 "Optional" / "Required" 模板（标签显示在项目左侧）或 "Optional -上方” / “必需 - 上方” 模板。

另外，我总是发现我需要设置 Width 插件属性才能让它看起来不错。

【讨论】：

【解决方案2】：

这是针对 apex 20.2 的。我添加了这个 css，它看起来更好。也许它会帮助其他人。

.select2-selection {position: relative;}
.select2-container {border: none; padding: 0;}
.select2-container .select2-selection--single
.select2-selection__clear {font-size: 14px; color: #888889; line-height: 28px;}
input.select2-search__field {outline-offset: 0;}
.t-Form-fieldContainer--floatingLabel.plugin-be\.ctb\.select2 .t-Form-labelContainer .t-Form-label {top: -1.2rem; font-size: 1.1rem}
.t-Form-fieldContainer--floatingLabel.plugin-be\.ctb\.select2 .apex-item-select.select2.select2-container {border-radius: 2px; border: 0.1rem solid #dfdfdf; padding-right: 8px !important}

【讨论】：