vue modal: make it scrollable ... instead of background

Check out this fiddle. https://jsfiddle.net/cf2h9657/

I added

max-height: 30px; 

and

overflow-y: auto;

to the .modal-container class in the CSS. Not 100% sure if this is what you wanted, but it makes the modal scrollable if there is more than 30px worth of content (can change the 30px to anything you need :) ). If you wanted just the content to be scrollable, then you can add those to the .modal-body.

Thanks for your suggestion :) I mean modals like "Long Modals" from this page http://jschr.github.io/bootstrap-modal/ , with fixed background and scrollable front-modal

up :-)

I'm also looking for this. Did you find any modals built for Vue that supports this?

Setting the css for the modal like Devon said works. I've updated the js fiddle from the Vue.js 2.0 modal example here (by setting the scroll on the modal-body): https://jsfiddle.net/achillesp/1rpf6fme/

I've set some max/min heights in css to present it better.

The trick to stop the background from scrolling is to make it fixed when the modal shows. This could be applied either to the html body, or to a parent div that contains the page content.

I think what you show here is slightly different from what we need.

1. The modal should not scroll itself. The window should scroll the modal. Look at how the last example long modals works here http://jschr.github.io/bootstrap-modal/

2. The modal should resize based on its conents height.

I think to achieve this we need a javascript solution. Preferably built for Vue.

I made a solution similar to what airbnb uses when you click on reviews here:

https://www.airbnb.com.au/experiences/282?location=Seoul%2C%20South%20Korea&source=p2&currentTab=experience_tab&searchId=93ea0dd3-49c4-49dc-9e21-2967e541b092

Changed the fiddle here, copy pasted from airbnb:

https://jsfiddle.net/00xz0f9g/

Would this work better?