Bulma: Card Modal dropdown issue

[rickbolton]

Overview of the problem

I've been trying to use a dropdown/autocomplete select within a card modal and rather than the dropdown appearing on top because of the overflow auto on the body it just adds scroll which doesn't seem to work well for UX

This is about the Bulma CSS framework

I'm using Bulma 0.4.4

My browser is: Chrome 59.0.3071.115

Steps to Reproduce

I've setup a codepen to reproduce as when you hover over a dropdown e.g. the new dropdown then it just adds scroll to the body

https://codepen.io/anon/pen/EXJdBx

Expected behaviour

Actual behaviour

I've checked out Bootstraps modal behaviour to see how that works and it looks to actually set the scroll on the whole modal rather than the body of the modal.

Any help or advice would be appreciated.

[ewjoachim]

I have the exact same problem. Thank you for this cristal clear issue with the screenshots, I'm not sure I'd have been able to explain it with such clarity.

[apocalyarts]

+1

Any js components with overlays (datepicker, multiselect dropdowns, etc.) will just add scroll.

Also, I'm missing an option to pin a modal to the top of a page (like bootstrap). If I have something like advanced settings in a model that get toggled via JS, the modal grows in two directions rather than just on the bottom side, because everything is always centered.

[grebebird]

+1 for us as well - a blocking issue for which we'll have to develop a different UX paradigm since this isn't workable. Has anyone found a workaround in the meantime?

[apocalyarts]

Just add a custom class to your modal root div, seems to do the trick for now with overlay divs

.hours-modal {
  overflow: visible;
  .modal-card-body {
    overflow: visible;
  }
}

[grebebird]

Revisited this issue when I tried to use an autocomplete component instead of a modal. The overflow: visible works to put the autocomplete dropdown above the footer, but it doesn't go outside of the modal itself. Have I done something wrong, or might this be something else, like perhaps a stacking context problem instead of a CSS issue?

https://codepen.io/anon/pen/pLZEJb

[wanxe]

Try adding the overflow also on the .modal-card
https://codepen.io/jnieto/pen/bvjwYE

[grebebird]

Argh, yes, of course - my "Monday brain" must be interfering with my debugging skills. So many nested elements hiding things from us. Thank you!

[rickbolton]

@grebebird Your "Monday but actually Tuesday because of the bank holiday brain" haha

[fernando-nog]

This sovled my problem:

.modal-card { overflow: visible; .modal-card-body { overflow: visible; } }
Thx everyone...

[dsbert]

This solution doesn't seem to work if the card content has a scrollbar.

[davestaab]

Yes, as @dsbert says, overflow visible works great if you can use it. But if you're in a scroll container, you can't overflow.

I guess you have to depend on a JS solution and append-to-body techniques

[wrabit]

I revisited this and have got a working hack which doesn't touch js or clip the bottom of tall modals.

.modal.has-overflow {
  position: fixed !important;
  overflow: auto !important;
  .modal-background {
    position: fixed !important; // so page stays dark as we scroll
  }
  .modal-content, .modal-card, .modal-card-body {
    overflow: visible !important;
  }
}

https://codepen.io/will-abbott/pen/zgEOmW

[apauly]

I revisited this and have got a working hack which doesn't touch js or clip the bottom of tall modals.

.modal.has-overflow {
  position: fixed !important;
  overflow: auto !important;
  .modal-background {
    position: fixed !important; // so page stays dark as we scroll
  }
  .modal-content, .modal-card, .modal-card-body {
    overflow: visible !important;
  }
}

https://codepen.io/will-abbott/pen/zgEOmW

This somehow causes Firefox to not scroll at all. Fixed version:

.modal.has-overflow {
  position: fixed !important;
  overflow: auto !important;
  .modal-background {
    position: fixed !important; // so page stays dark as we scroll
  }
  .modal-content, .modal-card, .modal-card-body {
    overflow: auto !important;
  }
}