Dropdown selected option

Ignition
1

Hi guys,

How can I make the selected option text fit in my dropdown, I can't figure it out.
I want to display all the text.

Capture

Thx for your help

2

Try here:

3

Make this in advanced style sheet.css

.psc-fitDropDown .iaDropdownCommon_value.ia_dropdown__valuePill__value {
    white-space: normal;
    word-break: break-all;
}

( word-break: break-all; is optional,)

Add the class fitDropDown to the dropdown
image

You will have to be sure the dropdown initial size is big enough to contain the text ofc

3 Likes
4

Thx a lot it works perfectly, can you just explain me how it works ?

.iaDropdownCommon_value.ia_dropdown__valuePill__value, is this a component property ? Do all components has that kind of property ?

As you guess I'm new to Ignition hihi.

Thx again

5

This is css.

Perspective views is a tool to create webpages through a Jython designer. Which turns your design into html and css. (very simplified)
Most of the css is not visible to the normal user, but can be viewed using browser inspector tools. With these tools you can find the underlying html/css structure which you could use to modify some stuff with the advanced stylesheet.
This is pretty advanced if you do not know anything about html/css

If you look in the inspector, you can see the html and what classes this textfield has, allowing me to construct css to fix your issue.

image
image963×206 17 KB

Most perspective compents have classes everyhwere that can be used to create simple constructors like this, but some of the advanced components are harder (charts, tables and stuff)

2 Likes