# Perspective Dropdown Component - Overlap main view from side menu **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [May 29, 2024, 10:26pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-component-overlap-main-view-from-side-menu/91108 "2024-05-29T22:26:26Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Henrique\_Starosky](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/henrique_starosky/32/81725_2.png) [@Henrique\_Starosky](https://forum.inductiveautomation.com/u/Henrique_Starosky)\ **Post date:** [May 29, 2024, 10:26pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-component-overlap-main-view-from-side-menu/91108/1 "2024-05-29T22:26:26Z")
Hello all! Have you guys ever used a dropdown in a side menu? If so, were you successful in overlapping the main view? We are having issues to see a rather long string on a dropdown, so I wanted to see if someone knew how to fix that... I've tried out a bit of styling to see if something would make it work, but no dice so far. ---
**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:** [May 29, 2024, 10:50pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-component-overlap-main-view-from-side-menu/91108/2 "2024-05-29T22:50:12Z")
Try adding in, `props.dropdownOptionStyle.whiteSpace : pre-wrap` ![Dropdown label wrap](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/72ed1beaebcfe65bcdfce8bf462873f6ba3c50af.png) That will, at least, wrap the labels when dropped down. There should be a way of wrapping the selected item too. Hmmm. ---
**Author:** ![Henrique\_Starosky](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/henrique_starosky/32/81725_2.png) [@Henrique\_Starosky](https://forum.inductiveautomation.com/u/Henrique_Starosky)\ **Post date:** [May 31, 2024, 11:49am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-component-overlap-main-view-from-side-menu/91108/3 "2024-05-31T11:49:41Z")
Yeah, at least we can read what's there. Thank you! Still, can anyone from IA tell us if it's this has another fix either hidden or planned for a future release? It would be a nicer solution rather than just breaking the line... ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [May 31, 2024, 12:06pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-component-overlap-main-view-from-side-menu/91108/4 "2024-05-31T12:06:26Z")
You may try using overlow hidden CSS property ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/b/bb0c2331e7f0c2f86afaaf5b69cff1f5cb97bccc.png) [CSS Overflow (w3schools.com)](https://www.w3schools.com/css/css_overflow.asp) ---
**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:** [May 31, 2024, 12:11pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-component-overlap-main-view-from-side-menu/91108/5 "2024-05-31T12:11:06Z")
That would hide part of the text. The OP wants to _show_ it! ---
**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\ **Post date:** [May 31, 2024, 12:13pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-component-overlap-main-view-from-side-menu/91108/6 "2024-05-31T12:13:20Z")
ah ok, misunderstood. your fix seem right one. ---
**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:** [May 31, 2024, 12:13pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-component-overlap-main-view-from-side-menu/91108/7 "2024-05-31T12:13:54Z")
It's not an IA issue. It's the way of the web. Try adding this to your advanced stylesheet1. Note that it will apply to all dropdowns in your project. ```css .iaDropdownCommon .iaDropdownCommon_value { overflow: hidden; text-overflow: ellipsis; white-space: wrap; padding: 2px 4px; } ``` This will override the default theme settings. 1 Project Browser → Perspective → Styles → right-click → Advanced Stylesheet. ---
**Author:** ![Henrique\_Starosky](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/henrique_starosky/32/81725_2.png) [@Henrique\_Starosky](https://forum.inductiveautomation.com/u/Henrique_Starosky)\ **Post date:** [May 31, 2024, 12:55pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-component-overlap-main-view-from-side-menu/91108/8 "2024-05-31T12:55:41Z")
Sadly that didn't work, so I've decided to mess around in the Chrome DevTools to find out what could be done. Here is what I found out: 1. The dropdown options are shown in a modal. 1.1. The classes of that modal are `.ia_componentModal .component-modal-large-viewport .component-modal-below hide-arrow .iaDropdownCommon_options_modal .ia_dropdown__optionsModal` 2. Inside that modal, there are two `
` depths, with some global CSS rules applied to them. 3. Further down there is another `
`, classed `.iaDropdownCommon_options`. This `
` contains the list components, which are `` components. Using the `props.dropdownOptionStyle` influences those `` components, which do not influence their modal view. I believe there should be another style prop, something like `props.dropdownModalStyle` for styling that root `
`, as there might be cases where you need to override that styling in a single component. For now, I'll keep using the first solution given, as I need to deliver an MVP soon enough.