User dropdown in reservation list blocked when only one reservation

[orenyk]

When the reservation list is short (e.g. one reservation), the dropdown menu that comes from clicking on a user's name is cut off. Not a huge issue but should be a quick fix.

[orenyk]

This is a pretty ugly UX failure, let's get it fixed in v4.1.

[caseywatts]

just postulating
maybe this is a responsive table? That might cause this weird behavior hmm

[mnquintana]

Whaaaaat how did this regress? I fixed this in 2012

[orenyk]

No idea, I picked up on this a while ago. Do you remember what the fix was?

[mnquintana]

Related to #205

[orenyk]

I couldn't find the associated PR, were you guys using them back then?

[mnquintana]

I don't think we were 😶

[mnquintana]

This was the commit though: 3a80f63

[orenyk]

Thanks. It appears to be a known issue w/ responsive tables (go @caseywatts!), not sure how we would fix it.

[mnquintana]

It isn't officially supported, so we'd have to come up with a workaround.

[leocaseiro]

I confirm the same issue, I've fixed changing the position from absolute to static. Hope works for somebody else. Worked on Chrome Desk, Chrome Mobile and Safari Mobile for iPad and iPhone.

@media (max-width: 767px) {
  .table-responsive .dropdown-menu,
  .table-responsive .dropdown-toggle {
        position: static !important;
  }
}

https://jsfiddle.net/leocaseiro/D2RLR/8075/

PS: I'm not sure if needs !important

[kaystrobach]

for me the following gave a useable result:

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

It includes the dropdown inside the table for mobile devices and makes is simply overflow on desktop devices

[orenyk]

Thanks for the help @leocaseiro and @kaystrobach, we'll try to get this in soon!

[orenyk]

Given that we have a fix for this, I'm throwing it in v5.6.0 so we can put it behind us.

[leocaseiro]

👍

[orenyk]

I'm just jumping on this now, it won't need tests or anything so it should be a few minutes of work.

[orenyk]

Damn, this is trickier than I thought 😕. We want the overflow behavior to be dependent on the height of the table, not on the width of the screen (it's not necessarily a responsive issue). While adding position: static !important; does fix the problem, we don't want it to be used if the table is tall enough not to scroll. What if we had a min-height instead?

[orenyk]

Nope, no such thing for tables 😞. I'll look into other solutions.

[orenyk]

height was the answer (based on this SO answer in the same thread). Arbitrarily setting it to 10em seemed to work, opening a PR now!

[skegel13]

This gives the best result for me:

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
         position: relative;
     }
 }
 @media (min-width: 768px) {
     .table-responsive {
         overflow: visible;
     }
 }

I just changed @leocaseiro and @kaystrobach answers to use relative positioning instead of static positioning. I think static positioning can break the z-index so on mobile devices, the dropdown-menu would appear behind the dropdown-backdrop making the links inaccessible.