# Perspective Dropdown Options Width does not scale with component **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [April 1, 2022, 10:42am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918 "2022-04-01T10:42:34Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [April 1, 2022, 10:42am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/1 "2022-04-01T10:42:34Z")
I was implementing the suggestions 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/5): > > Officially it is CSS, just happens that it’s editable from the designer. Great solution either way. And I noticed that the options popup for my dropdown was not scaling to the width of my dropdown itself in the page. So if the client device was smaller, the options will trail off the side of the page with the width that my view is defined in the designer ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/2/c2dabb2934bb4941b7acc80449c62205a8db16f8.png) So you end up with this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b0f3193041c81157dc00129e43dae0b7b14c28ce.png) This popup is set to scale with view width, so even if I make sure to open it up fresh after I simulate the smaller screen, you can see that it does the same thing. However I recognize the screen size changing is not reflective of a real world scenario, but at least when I trigger the popup from a smaller screen directly the popup options should not exceed the viewable width of the dropdown itself. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bcd0191fee3a8b9f98322a41aea42e81ab945e74.png) I tried using theming to correct this by setting the `max-width: 95vw;` to the different classes on the modal popup for the options, but it did not like that. ```auto .ia_componentModal, .component-modal-large-viewport, .component-modal-below, .hide-arrow, .iaDropdownCommon_options_modal, .ia_dropdown__optionsModal { max-width: 95vw !important; } ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/b/fbed192c8938e65dcae1ffdabfda9dbaf5efaa86.png) Any ideas on how I can get these dropdown options to scale with the size of my dropdown? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 1, 2022, 10:45am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/2 "2022-04-01T10:45:28Z")
Its not possible without js The popup from the dropdown opened on click is a different component in the dom. So css has no acces to the width of the dropdown ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [April 1, 2022, 10:47am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/3 "2022-04-01T10:47:58Z")
I realized that its actually the dropdown width that is not scaling with the popup. So even though when I open the popup I have it set to viewport bound, it won’t shrink the contents of the view (Note the horizontal scrollbars) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/b/3b06acb7af8d9c3afc0fe2c1b90e02c85ef30ef3.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/1296808f6487d2badfe2ba792caea60530e944b5.png) So I know that if this was just an issue of the an embedded view I would set it to be able to shrink, and all of the components inside. However because I am inside the popup I am not sure how I would tell the root container that it is allowed to shrink width wise? Currently its a flex container with very stretch friendly settings on it, not sure how this gets handled whenever the popup is wrapping the view ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6bdf8893ad38021cd3ac61cddc8373002c297ee.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 1, 2022, 10:52am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/4 "2022-04-01T10:52:48Z")
components in a flex container should have a “shrink” property set it to 1 ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [April 1, 2022, 10:55am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/5 "2022-04-01T10:55:06Z")
Because this is a flex container set to column, they all have `shrink` set to 1 already, but they are shrinking vertically. The issue I am having is that the root container is not shrinking with the size of the popup, not the components inside of it. If I resize the view inside the designer than all works as expected, its just when it is in a popup smaller than the default width ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 1, 2022, 10:57am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/6 "2022-04-01T10:57:20Z")
Ive recently replied to someone else about resizing popups, its not the same as you, but maybe it helps > [@Perspective Popup runtime resize behavior](https://forum.inductiveautomation.com/t/perspective-popup-runtime-resize-behavior/57007): > > I would like to open a popup view and resize it while it is open if the user clicks on a button. When the popup is open and not moved (from the position it was open on) the enlargement of the popup works perfectly fine, meaning it resizes to the new dimension and with a close button it will shrink down to the original size. The problem occurs when I drag/move the pop up from the position it was opened at and then try to resize it . The following is the original sized popup this is … ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [April 1, 2022, 11:04am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/7 "2022-04-01T11:04:06Z")
Yeah, this corrects a resizing popup. But it defines the auto width of the embedded view as its default width, so then my popup is too large for my screen ```auto .ia_popup { width: auto !important; } ``` I would say in a normal embedded view I would set `useDefaultViewWidth` to `False` and that would allow this horizontal scaling. Any ideas what that does to the CSS that could potentially be recreated? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 1, 2022, 11:59am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/8 "2022-04-01T11:59:26Z")
can you get me your view and popup view? ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [April 1, 2022, 12:11pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/9 "2022-04-01T12:11:27Z")
What if you had another flex container set to row which this container was within? Would it work then? ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [April 1, 2022, 12:13pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/10 "2022-04-01T12:13:01Z")
Since the popup views width is 800, go into responsive mode and set it to ~500 and you can easily see this issue [PopupExample.zip](https://forum.inductiveautomation.com/uploads/short-url/lSMtDtaE9Nd8Fp6H53TJSqelhUO.zip) (4.6 KB) > [@lrose](#): > > What if you had another flex container set to row which this container was within? Just tried wrapping the example in a flex container set to row and no luck ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b0ecae05c6435c4e167d0a448f97d7fcb7a4906a.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [April 4, 2022, 1:21pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-options-width-does-not-scale-with-component/57918/11 "2022-04-04T13:21:00Z")
So yes the link i posted above had a similar thing. in your case the view (with the dropdown) is assigned a min/max height/width but the popup has nothing assigned yet (so is auto) try this but it will auto set the popup to the smallest possible ```auto .popup-body > div { min-height: auto !important; max-height: 100vh !important; min-width: auto !important; max-width: 100vh !important; } ```