DAT.GUI : modify width of text field in order to put a long text
I would like to increase the width of a text field with DAT.GUI library JavaScript.
From this link, if I do (with 0 index corresponding to the index gui.add field like done below):
gui.add(params, 'StartingVector').name('Starting Vector : ');
gui.__controllers[0].domElement.style = "width:100%";
But I can't set a long text in this field. Here's a capture of the field without gui.__controllers[0].domElement.style = "width:100%"; :
Now below, a capture with gui.__controllers[0].domElement.style = "width:100%"; and with a long text set in this field :
gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');
As you can see, I can't get to put a long text in this modified field (via domElement.style="width:100%";).
How can I enlarge this text field in order to put a long text?
PS: the dat.gui.js that I used is available on the following link [dat.gui.js][4]
UPDATE 1 :
@
I tested your solution to join the cases into only one (for putting a long text with the same color, ideally white text on black background). Here's the result :
As you can see, the bottom case on the right hides the long text "A Single long line just for some fun" and finally, only "A single lin" appears. I would like to remove this grey case on the right and I don't know how to do it.
Here what I tried into my JS script (I took solution you suggested : "4 is the forth row of the menu in my script"):
gui.__ul.childNodes[4].classList += ' longtext';
gui.__ul.childNodes[4].childNodes[0].childNodes[0].classList += ' full_width';
with CSS :
.longtext {
line-height: 13px !important;
height: 40px !important;
}
.full_width {
width: 100% !important;
}
UPDATE 2
My script is available on [this link][6]. My issue is located between line 272 and 307, and especially 'StartingVector' into params structure :
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';
As you told me, I used:
gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');
but the phrase is stopped at "with" word, nothing appears after ( i.e "testing a long text like this :"
I have put your CSS:
.longtext {
line-height: 13px !important;
height: 40px !important;
}
.full_width {
width: 100% !important;
}
Here's a capture which illustrates the issue :
I don't want to put interactively the long text, I want to set it and fixed it (like others short text fields in the menu) : I don't want it to be modified by user.
UPDATE 3
With the solution suggested by Niket Pathak, right grey case is still present and hides the long text; here below a capture of the menu.
You can achieve this using a simple combination of css & JS. To go about this, we will
- Create a class, say
.longtextwhere we will define the styling that we need. Select the correct
<li>element and add our above css class to its classList to over-ride the li's existing styling like this:// 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';
Checkout the following snippet in action:
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>