Adjusting the width of pane/label column

[abolfazlshirazi]

Currently, two classes control the width of the pane and the column width of the labels: "tp-dfwv" and "tp-lblv_v"

By default they are 256px and 160px. However, when user adds some long labels, they do not fit and it makes the pane looks ugly.

To solve this problem, it is necessary to manually modify these two classes in the main file according to the length of the labels which are used. In my case, I changed 256px to 300px and 160px to 130px to fix the problem.

As a recommendation, it will be great if the user can also control these width when creating the pane. Or there can be a trigger to dynamically adjust the with according to the length of the labels.

Also, thinking about labels with more than one line like: "label line1<\br> label line2". Maybe some enhancements can be useful here.

[cocopon]

About width of .tp-dfwv

This is by design. .tp-dfwv is the default wrapper view and its width is suitable for most cases. If you want to specify the pane width,

• create a new container element that has preferred width and specify container option
• or change width of the default wrapper view manually as you said

About width of inputs / monitors

This is not recommended, but about an appearance so I think it should be specified by CSS. You can change them as below:

/* Default wrapper view */
.yourCustomContainer .tp-dfwv {
  min-width: 360px;
}
/* Input and monitor view */
.yourCustomContainer .tp-lblv_v {
  min-width: 180px;
}

[cocopon]

Closed, feel free to reopen the issue if you still have a problem.

Also, thinking about labels with more than one line like: "label line1<\br> label line2". Maybe some enhancements can be useful here.

Created a new issue about this idea: #53

[Sija]

I've just migrated from dat.gui and everything works great, except for this - i.e. changing the width value of the pane. Would it be possible to add it as a configuration option?

[cocopon]

Would it be possible to add it as a configuration option?

You can use the CSS variable --tp-blade-value-width (undocumented, still in beta) for this.
Example: https://tweakpane.github.io/docs/catalog.html

[Sija]

@cocopon That doesn't work as expected, since it changes the width only for the value field and not the pane container.

[cocopon]

Ah, you want to change the pane width. So is there any reason not to use the CSS?
#46 (comment)

[Sija]

That's what I'm currently doing, yet it seems that using a custom container is a more robust solution. Initially I wasn't sure how to handle it properly and was used to the width parameter from dat.gui, hence the confustion :)

[cocopon]

it seems that using a custom container is a more robust solution

Right. I think that params.width conflicts with gui.domElement property.
https://github.com/dataarts/dat.gui/blob/master/API.md#new-guiparams
http://web.archive.org/web/20200111083027/http://workshop.chromeexperiments.com:80/examples/gui/#8--Custom-Placement