Perspective Dropdown Options Width does not scale with component

[kgamble]

I was implementing the suggestions here:

Perspective Dropdown - Use Word Wrap on Options with long label texts

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

So you end up with this:

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.

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.

.ia_componentModal, .component-modal-large-viewport, .component-modal-below, .hide-arrow, .iaDropdownCommon_options_modal, .ia_dropdown__optionsModal {
        max-width: 95vw !important;
}

Any ideas on how I can get these dropdown options to scale with the size of my dropdown?

[victordcq]

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

[kgamble]

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)

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

[victordcq]

components in a flex container should have a “shrink” property set it to 1

[kgamble]

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

[victordcq]

Ive recently replied to someone else about resizing popups, its not the same as you, but maybe it helps

Perspective Popup runtime resize behavior

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 [image] this is …

[kgamble]

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

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

[victordcq]

can you get me your view and popup view?

[lrose]

What if you had another flex container set to row which this container was within? Would it work then?

[kgamble]

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

[victordcq]

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

.popup-body > div {
  min-height: auto !important;
  max-height: 100vh !important;
  min-width: auto !important;
  max-width: 100vh !important;
}