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

Question

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

来自this link，如果我这样做（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可以在以下链接中找到[dat.gui.js] [4]

更新1：

@

我测试了你的解决方案，将案例加入到一个案例中（用于放置具有相同颜色的长文本，理想情况下将白色文本放在黑色背景上）。这是结果：

如您所见，右侧的底部案例隐藏了长文本“A Single long line just for some fun”，最后只显示“A single lin”。我想删除右侧的灰色案例，我不知道该怎么办？

这里我尝试了我的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

好的，我的脚本可以在[此链接] [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 θ ');
 293 controllerComponentVectorPhi = gui.add(params, 'ComponentVectorPhi', minComponentPhi, maxComponentPhi, 0.01).name('Component φ ');
 294 gui.add(params, 'CurrentVector').name('Current Vector :');
 295 controllerCurrentComponentVectorTheta = gui.add(params, 'ComponentCurrentVectorTheta', minCurrentComponentTheta,
 296                                         maxCurrentComponentTheta, 0.01).name('Component θ ').listen();
 297 controllerCurrentComponentVectorPhi = gui.add(params, 'ComponentCurrentVectorPhi', minCurrentComponentPhi,
 298                                       maxCurrentComponentPhi, 0.01).name('Component φ ').listen();
 299 gui.add(params, 'TotalDiffCovariantDerivative').name('Total Differential :');
 300 controllerCurrentTotalDiffComponentVectorTheta = gui.add(params, 'ComponentCurrentTotalDiffTheta', minCurrentTotalDiffTheta, maxCurrentTotalDiffTheta,
 301                                                  0.00001).name('Component θ ').listen();
 302 controllerCurrentTotalDiffComponentVectorPhi = gui.add(params, 'ComponentCurrentTotalDiffPhi', minCurrentTotalDiffPhi, maxCurrentTotalDiffPhi,
 303                                                0.00001).name('Component φ ').listen();
 304 
 305 // Adding from StackOverflow 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（'使用测试长文本开始向量：'）;

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

我已经把你的CSS：

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

 .full_width {
          width: 100% !important;
              }

这是一个说明问题的捕获：

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

我希望你能明白我的意思。请随时与我联系以获取更多信息。

更新3

您可以在此链接上看到[（我的动画链接）] [8]，根据Niket Pathak建议的解决方案，右灰色案例仍然存在并隐藏长文本;这里是菜单的捕获。

[] [8]

此致

Answer 1

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

1. 创建一个类，比如.longtext我们将定义我们需要的样式。

2. 选择正确的<li>元素，并将我们上面的css类添加到其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';  
   

查看以下代码段：

＆＃13;
＆＃13;
       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';          
＆＃13;
    .longtext {
        line-height: 13px !important;
        height: 40px !important;
    }
    .full_width {
        width: 100% !important;
    }
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;