Perspective Dropdown Component - Overlap main view from side menu

Ignition
,
1

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.

2

Try adding in,
props.dropdownOptionStyle.whiteSpace : pre-wrap

Dropdown label wrap

That will, at least, wrap the labels when dropped down. There should be a way of wrapping the selected item too. Hmmm.

1 Like
3

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...

4

You may try using overlow hidden CSS property

image

CSS Overflow (w3schools.com)

5

That would hide part of the text. The OP wants to show it!

1 Like
6

ah ok, misunderstood.

your fix seem right one.

7

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.

 .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.

8

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 <div> depths, with some global CSS rules applied to them.
  3. Further down there is another <div>, classed .iaDropdownCommon_options. This <div> contains the list components, which are <a> components. Using the props.dropdownOptionStyle influences those <a> components, which do not influence their modal view.

I believe there should be another style prop, something like props.dropdownModalStyle for styling that root <div>, 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.