Is there a way to increase the width of a text field using DAT.GUI library in JavaScript?
According to this source, you can achieve it by setting the style attribute for the first controller like this:
gui.add(params, 'StartingVector').name('Starting Vector : ');
gui.__controllers[0].domElement.style = "width:100%";
However, even with this modification, it seems that adding long text to the field is still an issue. Here's an image showing the field without the style modification:
On the contrary, here is an image with the modified style and a long text added to the field:
gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');
https://i.sstatic.net/Ies1B.png
As shown, it appears that the long text is truncated even after applying the style change.
If you have any suggestions on how to widen the text field to accommodate longer text, please let me know.
Please note that the dat.gui.js file I'm using can be found at [dat.gui.js][4]
Update 1
@
After implementing your suggested solution to customize the appearance of the text field, I encountered an issue where the bottom right case hides part of the long text ""A Single long line just for some fun"", displaying only ""A single lin" instead. How can I get rid of this grey case on the right?
This is what I tried in my JS script based on your advice (assuming '4' refers to the fourth row in my menu):
gui.__ul.childNodes[4].classList += ' longtext';
gui.__ul.childNodes[4].childNodes[0].childNodes[0].classList += ' full_width';
Here are the corresponding CSS styles:
.longtext {
line-height: 13px !important;
height: 40px !important;
}
.full_width {
width: 100% !important;
}
Update 2
The script I'm working on can be accessed via [this link][6]. The issue lies between lines 272 and 307, specifically within the 'StartingVector' section of the 'params' structure:
// Relevant code snippet from the script
272 var params = {
...
291 gui.add(params, 'StartingVector').name('Starting Vector with testing a long text like this : ');
...
Despite following your instructions, the text gets cut off after the word "with," failing to display the entire phrase. Even after applying the CSS styles you provided, the problem persists.
To illustrate the issue further, here's a screenshot:
https://i.sstatic.net/P0wdW.png
I am looking for a way to set the text fixed and prevent it from being edited by the user, similar to other short text fields in the menu.
Update 3
Although I attempted the solution proposed by Niket Pathak, the grey overlay persistently hides the lengthy text. A screenshot demonstrating this can be viewed below: