List Box Widget: How to change the width

[DataGuy30]

Does anyone know how to change the width of the area where you type in multi-line strings in the list Box Widget. I want the width to match the width of the longest line of default text. You can change the number of “Number of Visible options” to change the height of the box when you open the composite view, but the width always stays the same unless you manually drag the box to make it bigger. putting the list box widget and Adjusting the “composite view Layout” width and heigth does not seem to impact the text box dimensions at all…any suggestions?

[k10shetty1]

Hi @DataGuy30,

You can achieve this by using custom CSS to define the width of the List Box.

For this to work you’ll first need to enable legacy styling for the entire Composite View layout (tick the “Use legacy mode” option in the Layout Editor, as shown below).

Once legacy styling is active, you can add a CSS rule like this in your workflow:

.knime-listbox {
  width: 100vw !important;
  max-width: 100vw !important;
}

This will set the List Box to span the full width of the window.
If you’d like a different default width, just go into the CSS Editor and change the value from 100vw to whatever suits your layout (for example 50vw).

Note: this approach hard-codes the width. The size is fixed to whatever you define in the CSS.

I have attached an example workflow that demonstrates this setup.
testListBoxWidth.knwf (51.9 KB)

Best,
Keerthan