DAT.GUI : 修改文本字段的宽度以放置长文本

Question

我想使用 DAT.GUI 库 JavaScript 增加文本字段的宽度。

来自，如果我这样做（0 index 对应于索引 gui.add 字段，如下所示）：

gui.add(params, 'StartingVector').name('Starting Vector : ');
gui.__controllers[0].domElement.style = "width:100%";

但是我无法在此字段中设置长文本。这是没有 gui.__controllers[0].domElement.style = "width:100%"; 的字段的捕获：

下面是一个带有 gui.__controllers[0].domElement.style = "width:100%"; 并且在此字段中设置了长文本的捕获：

gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');

如您所见，我无法在此修改后的字段中输入长文本（通过 domElement.style="width:100%";）。

如何放大此文本字段以放置长文本？

PS: 我用的dat.gui.js在下面link [dat.gui.js][4]

更新 1：

@

我测试了您的解决方案，将案例合并为一个案例（用于放置具有相同颜色的长文本，最好是黑色背景上的白色文本）。这是结果：

可以看到，右边的底格隐藏了长文本“A Single long line just for some fun”，最后只出现了“A single lin”。想去掉右边这个灰色的case，不知道怎么弄。

这是我在 JS 脚本中尝试的内容（我采用了您建议的解决方案：“4 是我脚本中菜单的第四行”）：

gui.__ul.childNodes[4].classList += ' longtext';
gui.__ul.childNodes[4].childNodes[0].childNodes[0].classList += ' full_width';

与 CSS :

.longtext {
           line-height: 13px !important;
           height: 40px !important;
          }
    
.full_width {
             width: 100% !important;
            }

更新 2

我的脚本可以在 [this link][6] 上找到。我的问题位于第 272 行和第 307 行之间，尤其是“StartingVector”到 params 结构中：

 272 var params = {
 273  GreatCircle : '',
 274  Rotationx : torusRotationInitX,
 275  Rotationz : torusRotationInitZ,
 276  StartingVector : '',
 277  ComponentVectorTheta : componentThetaInit,
 278  ComponentVectorPhi : componentPhiInit,
 279  CurrentVector : '',
 280  ComponentCurrentVectorTheta : componentCurrentThetaInit,
 281  ComponentCurrentVectorPhi : componentCurrentPhiInit,
 282  TotalDiffCovariantDerivative : '',
 283  ComponentCurrentTotalDiffTheta: componentCurrentTotalDiffThetaInit,
 284  ComponentCurrentTotalDiffPhi: componentCurrentTotalDiffPhiInit
 285 };
 286 
 287 // Set parameters for GUI
 288 gui.add(params, 'GreatCircle').name('Great Circle :');
 289 controllerRotationx = gui.add(params, 'Rotationx', 0.01, Math.PI-0.01, 0.001).name('Rotation x ');
 290 controllerRotationz = gui.add(params, 'Rotationz', 0.01, Math.PI-0.01, 0.001).name('Rotation z ');
 291 gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');
 292 controllerComponentVectorTheta = gui.add(params, 'ComponentVectorTheta', minComponentTheta, maxComponentTheta, 0.01).name('Component &theta; ');
 293 controllerComponentVectorPhi = gui.add(params, 'ComponentVectorPhi', minComponentPhi, maxComponentPhi, 0.01).name('Component &phi; ');
 294 gui.add(params, 'CurrentVector').name('Current Vector :');
 295 controllerCurrentComponentVectorTheta = gui.add(params, 'ComponentCurrentVectorTheta', minCurrentComponentTheta,
 296                                         maxCurrentComponentTheta, 0.01).name('Component &theta; ').listen();
 297 controllerCurrentComponentVectorPhi = gui.add(params, 'ComponentCurrentVectorPhi', minCurrentComponentPhi,
 298                                       maxCurrentComponentPhi, 0.01).name('Component &phi; ').listen();
 299 gui.add(params, 'TotalDiffCovariantDerivative').name('Total Differential :');
 300 controllerCurrentTotalDiffComponentVectorTheta = gui.add(params, 'ComponentCurrentTotalDiffTheta', minCurrentTotalDiffTheta, maxCurrentTotalDiffTheta,
 301                                                  0.00001).name('Component &theta; ').listen();
 302 controllerCurrentTotalDiffComponentVectorPhi = gui.add(params, 'ComponentCurrentTotalDiffPhi', minCurrentTotalDiffPhi, maxCurrentTotalDiffPhi,
 303                                                0.00001).name('Component &phi; ').listen();
 304 
 305 // Adding from Whosebug from Niket Pathak
 306 gui.__ul.childNodes[4].classList += ' longtext';
 307 gui.__ul.childNodes[4].childNodes[0].childNodes[0].classList += ' full_width';

正如你告诉我的，我用过：

gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');

但该短语停在“with”字处，之后没有任何内容出现（即“testing a long text like this :”

我已经把你的 CSS:

.longtext {
                 line-height: 13px !important;
                 height: 40px !important;
                }

 .full_width {
          width: 100% !important;
              }

这是一个说明问题的截图：

我不想以交互方式放置长文本，我想设置并修复它（就像菜单中的其他短文本字段一样）：我不希望它被用户修改。

更新 3

使用Niket Pathak建议的解决方案，右边的灰色案例仍然存在并隐藏了长文本；下面是菜单的截图。

Answer 1

您可以使用 css 和 JS 的简单组合来实现此目的。为此，我们将

创建一个 class，比如说 .longtext，我们将在其中定义我们需要的样式。

Select 正确的 <li> 元素并将我们上面的 css class 添加到它的 classList 以覆盖 li 的现有样式如下：

// var gui = new dat.gui.GUI();
// ...
// here childNodes[4] is the 4th <li> element that has long text.
gui.__ul.childNodes[4].classList += ' longtext';
// here childNodes[6] is the 6th <li> element having firstchild <div> whose firstchild is a <span> to which we add the class 'full_width'. 
gui.__ul.childNodes[6].childNodes[0].childNodes[0].classList += ' full_width';

查看以下代码片段：

       var obj = {
           message: 'Hello World',
           displayOutline: false,
           maxSize: 6.0,
           StartingVector: 'Dummy Text',
           SingleLine: '',
           explode: function () {
              alert('Bang!');
           },
       };

      var gui = new dat.gui.GUI();
      gui.remember(obj);
      gui.add(obj, 'message');
      gui.add(obj, 'displayOutline');
      gui.add(obj, 'explode');
      gui.add(obj, 'StartingVector').name('Starting Vector with testing long text like this : ');
      gui.add(obj, 'maxSize').min(-10).max(10).step(0.25);
       gui.add(obj, 'SingleLine').name('A Single long line just for some fun');
      // add class to the correct 'li' element
      gui.__ul.childNodes[4].classList += ' longtext';
      // Navigate through the DOM & add class to the 'span' element
      gui.__ul.childNodes[6].childNodes[0].childNodes[0].classList += ' full_width';

    .longtext {
        line-height: 13px !important;
        height: 40px !important;
    }
    .full_width {
        width: 100% !important;
    }

<!DOCTYPE html>
<html lang="en">
<head>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
</head>

<body>

</body>
</html>

DAT.GUI : 修改文本字段的宽度以放置长文本

DAT.GUI : modify width of text field in order to put a long text

javascript

css

dat.gui