SpectrumJS、拖动器和滑块位置问题与显示：无容器

Posted 2023-02-25

【中文标题】SpectrumJS、拖动器和滑块位置问题与显示：无容器

【英文标题】：SpectrumJS, dragger and slider position issue with display: none container

【发布时间】：2014-11-27 13:55:50

【问题描述】：

我需要在具有“显示：无”属性的 div 中使用 SpectrumJS，但是当我删除该属性以使 div 可见时，拖动器和滑块的位置与颜色集不对应。如果在容器 div 中未设置属性“display”，则一切正常。

帮助！

【问题讨论】：

如果您提供一些代码sn-ps，将更容易调试您的问题。

jsfiddle.net/jz37hLre/2

【参考方案1】：

根据您对插件的使用情况，您可能会在显示后重新初始化#flat2。

<div>
    <input type='text' id="flat" />
</div>
<div style="display: none" id="container">
    <input type='text' id="flat2" />
</div>
<input type="button" value="show div" onclick="$('#container').css('display', 'inline');$('#flat2').spectrum(
    flat: true,
    showInput: true,
    color: '#00aeef'
);"/>

---

添加： 或尝试初始化然后隐藏： http://jsfiddle.net/neildaemond/jz37hLre/4/

【讨论】：

不幸的是，现实并非如此简单，我发布的示例仅用于理解问题。在我的代码中，通过插件中的角度指令使用频谱来管理下拉菜单，并且无法重新初始化频谱实例。

但是我认为这是由于频谱错误导致的异常行为。

是的，不能真正弄清楚你是如何使用 angular 的，但我注意到如果你初始化然后添加 'display:none'，它会起作用：jsfiddle.net/neildaemond/jz37hLre/3