# Dropdown selected option

**URL:** <https://forum.inductiveautomation.com/t/dropdown-selected-option/91922>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 17, 2024, 9:16am UTC](https://forum.inductiveautomation.com/t/dropdown-selected-option/91922 "2024-06-17T09:16:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Martin\_Chauveliere](https://avatars.discourse-cdn.com/v4/letter/m/51bf81/32.png) [@Martin\_Chauveliere](https://forum.inductiveautomation.com/u/Martin_Chauveliere)\
**Post date:** [June 17, 2024, 9:16am UTC](https://forum.inductiveautomation.com/t/dropdown-selected-option/91922/1 "2024-06-17T09:16:20Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/1/013974dcddb77cd05cc88fcbd9213ad7b81a3a13.png)

Thx for your help

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [June 17, 2024, 9:29am UTC](https://forum.inductiveautomation.com/t/dropdown-selected-option/91922/2 "2024-06-17T09:29:18Z")

</div>

Try here:

> [@Perspective Dropdown - Use Word Wrap on Options with long label texts](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/2):
>
> [image] Under dropdownOptionsStyle you need { "classes": "", "overflowWrap": "break-word", "whiteSpace": "normal" }

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 17, 2024, 9:33am UTC](https://forum.inductiveautomation.com/t/dropdown-selected-option/91922/3 "2024-06-17T09:33:00Z")

</div>

Make this in advanced style sheet.css

```python
.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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/1/41984574cc2c32c331e27490949fe362eb888113.png)

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

---

<div class="post-metadata">

**Author:** ![Martin\_Chauveliere](https://avatars.discourse-cdn.com/v4/letter/m/51bf81/32.png) [@Martin\_Chauveliere](https://forum.inductiveautomation.com/u/Martin_Chauveliere)\
**Post date:** [June 17, 2024, 10:09am UTC](https://forum.inductiveautomation.com/t/dropdown-selected-option/91922/4 "2024-06-17T10:09:13Z")

</div>

> [@victordcq](#):
>
> ```python
> .psc-fitDropDown .iaDropdownCommon_value.ia_dropdown __valuePill__ value {
> white-space: normal;
> word-break: break-all;
> }
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 17, 2024, 10:33am UTC](https://forum.inductiveautomation.com/t/dropdown-selected-option/91922/5 "2024-06-17T10:33:44Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/91b87d150e66d880f96251b99d3cf1ffb3cb633a.png)

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)