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

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 行之间，尤其是 params 结构中的“StartingVector”:

 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('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 的简单组合来实现此目的。 为此，我们将

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';  
   

检查以下代码片段:

       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>