Perspective Dropdown - Use Word Wrap on Options with long label texts

Ignition
,
1

Using Ignition 8.1.14

I’m hoping that one of the CSS gurus on here can help me accomplish what I’m trying to do. None of the built-in properties of the dropdown component do what I’m after (ie props.dropdownOptionStyle.overflowWrap or wordWrap)

What I’d like to achieve is for individual dropdown options to wrap the text of the option.label (grow vertically) rather than truncate the text.
Current behavior:
image

Desired behavior:
image

Is such a thing possible with Perspective?

2

image

Under dropdownOptionsStyle you need { "classes": "", "overflowWrap": "break-word", "whiteSpace": "normal" }

6 Likes
3

@Matthew.gaitan Thanks! The "whiteSpace": "normal" was what I was missing. Bonus point for no css required! :grinning:

image

4

haha yeah, if i can’t easily do something in the designer I normally can’t be bothered to mess with the overriding the theme files to do some of this stuff

5

Officially it is CSS, just happens that it's editable from the designer.

Great solution either way.

6

If anyone would prefer this to be the default on all dropdown (tbh I am not sure why you wouldn't want it to be the default in my opinion) here is the CSS you need. Note, these have to be !important or the built in classes overwrite this.

.iaDropdownCommon_option {
        overflow-wrap: break-word !important;
        white-space: normal !important;
}

P.S. It is a huge PITA getting the html for the dropdown options out of the modal wrapper since every time you click the HTML in the page it closes the options...

3 Likes
7

You can say that again!

8

For accessing the dropdown without having it close, open the console in the browser developer tools and enter the following:
setTimeout(function(){debugger;}, 5000)
And then press enter. Then, on your page, select whatever dropdown you want to spawn the options and then wait. The above code will break into the debugger after 5 seconds, freezing the associated webpage. You are then free to browse the HTML at your leisure.

This is what I used when I was trying to increase the vertical size of items in a dropdown and was trying to determine what classes to override

4 Likes
9

Anyone here know the trick to get these dropdowns to wrap their values? The solution here is for options.

image

Me need wrappy