集成蚂蚁设计后查看器元素损坏

编程问答 2022-06-08

问题描述

我只是在玩蚂蚁设计，我注意到蚂蚁设计的全局样式覆盖了dom内部的所有元素。 因此，在集成ant之后，查看器工具栏发生了变化，而模型浏览器未发生变化。

enter image description here

enter image description here

覆盖

.adsk-viewing-viewer * {
  -webkit-Box-sizing: content-Box !important;
  -moz-Box-sizing: content-Box !important;
  Box-sizing: content-Box !important; }
对于所有查看器元素，

仅适用于工具栏，不适用于模型浏览器。

enter image description here

enter image description here

解决此问题的唯一方法是禁用Box-sizing：border-Box，但这仅在浏览器中有效，而在代码中无效。

有人遇到类似问题或知道解决方法吗？

谢谢。

解决方法

不幸的是，这是一个已知问题，我们没有官方的解决方案。将Forge Viewer与第三方CSS框架集成时，您将必须手动覆盖某些查看器GUI组件的样式，以恢复其原始样式。

在您的特定情况下，您可能需要为.adsk-viewing-viewer input.search-box选择器提供新规则，以恢复其原始样式，例如：

.adsk-viewing-viewer input.search-box {
    color: #fff;
    background: rgba(34,34,0.94);
    border: solid 1px rgba(0,0);
    border-bottom: solid 1px rgba(34,0.8);
    height: 34px;
    direction: ltr;
    margin: 0;
    padding: 7px 12px 8px 40px;
    font-size: 12px;
    width: 100%;
    outline: none;
    position: relative;
    box-sizing: border-box;
    line-height: normal;
    z-index: 1;
}
,

更新： 实际上，搜索框不是问题。我可以通过覆盖查看器和搜索框的框大小来获得原始样式。

.adsk-viewing-viewer * {
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}
.adsk-viewing-viewer .adsk-searchbox input.search-box {
  box-sizing: border-box !important;
}

enter image description here

但是我无法获得所有模型div的“叶子图标”和悬停大小才能正常工作。 enter image description here

更新： 刚刚解决了我的问题： 问题是装箱大小。您将不得不为每个未对齐的元素覆盖它。 添加以下内容解决了我的问题：

.adsk-viewing-viewer .treeview lmvheader {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
autodesk-forgeautodesk-viewer