Twitter Bootstrap 3 responsive table in modal doesn't scroll down on mobile

Question

I have a modal with a responsive-table in it and it works fine on a desktop computer, but on a mobile device it doesn't work great because you can't scroll to the end of the table.

You can see an example here: http://www.draftfantasyfootball.co.uk/players If you click on a player name in the table, a modal opens up, but on a mobile device (or an iPhone 4 at least), you can't scroll to the bottom of the modal.

Anyone know why this is?

Thanks

Answer 1

I am assuming that your modal on a mobile device is set to full width and height of the screen. If so, you should try to add the following property in your modal content class like as shown below:

.modal-content{
max-height: calc(100vh - 1px);
    overflow-y: auto;
}

It should work on default CSS,if it does not work then kindly show us your code.