[ID] Unable to see all "Assigned Agencies" menu options for certain grants

[chrisxkeith]

After clicking on the down-arrow in the "Assigned Agencies" dropdown, part of the menu is not visible. Using the down-arrow to select an item works, but after it goes 'below the modal', you can't see what's selected. Clicking and dragging the scroll bar dismisses the menu (and then the scroll bar disappears).

[chrisxkeith]

Making the browser window small top-to-bottom causes reverse problem: Making it narrow 'fixes' it:

[chrisxkeith]

This comment shows a possible fix. I tried incorporating it as follows:

--- a/packages/client/src/components/Modals/GrantDetails.vue
+++ b/packages/client/src/components/Modals/GrantDetails.vue
@@ -81,7 +81,8 @@
       <b-row>
         <b-col>
           <multiselect v-model="selectedAgencies" :options="agencies" :multiple="true" :close-on-select="false"
-            :clear-on-select="false" placeholder="Select agencies" label="name" track-by="id">
+            :clear-on-select="false" placeholder="Select agencies" label="name" track-by="id"
+            style="position:fixed; top:auto; left:auto; width:fit-content">
           </multiselect>

This makes the whole menu show: However, it makes the dropdown smaller, and puts too much (to my eye, anyway) horizontal visual separation between the dropdown and the “Assign” button: This may happen to other Vue multiselectcomponents in other modals, which means a better fix would be to subclass multiselect (or mixin?)

[misspran]

Hey so because there's a tag wrapped around the agency drop down and then a separate wrapped around the assigned button. There's a set styled evenly divided width on the parent of those elements. Picture both of them sitting in 2 evenly sized columns. So when you change the width of the dropdown, the size of the columns stay the same and the assign button is still in the other column keeping a giant distance in between if that makes sense.

I would just remove all those b-col parent tags, keep it simple and make the row being the parent container element and do some in there.

<b-row style="padding: 16px;">
    <multiselect v-model="selectedAgencies" :options="agencies" :multiple="true" :close-on-select="false"
      :clear-on-select="false" placeholder="Select agencies" label="name" track-by="id"
      style="width: 200px"
    >
    </multiselect>
    <b-button style="margin-left: 16px;" variant="outline-success" @click="assignAgenciesToGrant">Assign</b-button>
</b-row>

[chrisxkeith]

@misspran Thanks! I will look at this over the weekend and get back to you if I have questions. Have a good weekend.

[chrisxkeith]

I'm not clear why css style "position" (which I think of as affecting position in x and y axes) should affect where something is rendered in the z-axis. I read the top-voted answer to this post, but can't make sense of it.

@disambiguator : Might we have a little working session sometime in the next few days to help me understand this?

FYI, using z-index does seem to fix the problem:

--- a/packages/client/src/components/Modals/GrantDetails.vue
+++ b/packages/client/src/components/Modals/GrantDetails.vue
@@ -73,7 +73,7 @@
         <h4>Assigned Agencies</h4>
           <multiselect v-model="selectedAgencies" :options="agencies" :multiple="true" :close-on-select="false"
             :clear-on-select="false" placeholder="Select agencies" label="name" track-by="id"
-            style="width: 300px; margin: 0 16px;"
+            style="z-index: 9999; width: 300px; margin: 0 16px;"
           >

[disambiguator]

@chrisxkeith Happy to have a working session on this. Did a bit of digging and I think that the z-index answer is a pretty good one.

Basically, a child div cannot "break out" of its parent element. In this case the dropdown being the child element of the modal (not directly but through a few layers).

Honestly, I think the library should be doing this for us, and this is probably annoying for all users of vue-multiselect. The z-index solution solves this by explicitly setting the dropdown to a higher z-index.

Your previous solution of position: fixed would also work because a fixed element is no longer relative and can break out. You'd lose any auto nice layouting that HTML does for you, which is why it looks crappily positioned after that. So you'd have to do manual styling to get it to play nice.

The z-index solution avoids this. Any reason not to?

[chrisxkeith]

@disambiguator z-index solution makes sense to me. However, it looks like Vue is doing something (when it generates html) that prevents it from working in some cases. This screenshot shows the bad dropdown behavior with the z-index styling on a parent div.

If it's easier for you to do a working session on a weekend, I'm definitely available. If you give me an email address, I will share my Google Calendar with you so you can see my schedule. Thanks for all your help!

[chrisxkeith]

@disambiguator @as1729 Could either of you do a few experiments to see if-and-when this happens to you? I'm trying to figure out if there is some pattern (e.g., screen resolution, window size, etc.) that causes this to happen.

I'm guessing that no end users have reported this because they can type into the text field and reduce number of items in the dropdown. If that is indeed the case, perhaps this can be de-prioritized @TylerHendrickson @mhuang-usdr ?

[mhuang-usdr]

No partners have reported this. If it's not easily replicable, then we can deprioritize