Folio Scrolling Modal in Folio

[balfred1345 5]

Hi,

 

I apologize if this is a duplicate post, but I don't think the one I put in around 4 hours ago is going to go through.

 

I've got Folio set up here: 

http://whub34.webhostinghub.com/~videoh6/cidev2.com/concert-series/choral-arts-ensemble-season/

 

I need to have the modal window scrollable on small screens, iOS etc. Can you tell me how I can set this up in your Folio modals?

 

If you've got  CSS that can do this, can you please tell me how I can get the CSS to be "seen" in PL? In trying to make the above work myself, using #site and !important, the CSS would not take effect. Using Firebug, I could see that the CSS wasn't showing up.

 

Thanks,

Bruce

[ahansson89 57]

This is a core issue as it is happening to all modals and should be fixed in core.

I posted the issue on Github so that you can follow it there: https://github.com/pagelines/DMS/issues/437

[balfred1345 5]

Thanks for the reply, and for posting on Github.

 

Do you know how long it is likely to take PL to fix the core so scrolling in modals work?  I ask because I have a go-live date in 2.5 weeks. Should I assume that I should figure out an alternative option to Folio until the core is fixed?

 

Thanks,

Bruce

[ahansson89 57]

Let's see how it goes, otherwise I can give you some CSS that you can put in your custom LESS field.

[balfred1345 5]

If it is possible for you to give me some CSS, I'd greatly appreciate it.

 

Since I have only a little over two weeks until go-live date, my client is going to want to see everything on the site working (including on iOS) very soon. 

I tried a number of CSS approaches that I found on Stack Exchange, but couldn't get them to even show up in Firebug when I checked the CSS my site was using. Maybe LESS would work better? Unfortunately, I haven't yet learned LESS.

 

Thanks for your help.

[balfred1345 5]

Hi ahansson89,

 

Checking back with you to see if you are able to give me CSS that will make the modal scrollable in iOS, or if you know of a timeline for PL fixing this issue in the core. The site goes live in a couple of days, and I need to figure something out soon, or I'll have an unhappy client.

 

Thanks,

Bruce

[ahansson89 57]

As it is a core issue, @pross or arpowers should be the ones fixing this.

I already submitted it to Github where you can follow the issue:

https://github.com/pagelines/DMS/issues/437
All updates on the issue will go in here.

I will see if I can fix it sometime tomorrow.

[ahansson89 57]

This will do it.

Add it to your custom LESS field.
 

@media (max-width: 480px)
{
    .modal {
        position: fixed;
        top: 3%;
        right: 3%;
        left: 3%;
        bottom: 3%;
        width: auto;
        margin: 0;
    }
    .modal-body {
        max-height: 350px;
        padding: 15px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
     }
}

[balfred1345 5]

Thanks for the code. Oddly, this works only in when the iPhone is in vertical position, not in horizontal. I tried adding

 

overflow-x: auto;

 

to the .modal-body code above, but this did not help.

 

I can see the background scrolling under the modal, but the modal itself won't scroll.

 

Any additional help will be greatly appreciated by me!

 

Thanks,

Bruce

[ahansson89 57]

@media (max-width: 767px) {
  .folio-modal.modal.fade.in {
    position: fixed;
    top: 3%;
    right: 3%;
    left: 3%;
    bottom: 3%;
    width: auto;
    margin: 0;
    .modal-body {
      max-height: 160px;
      padding: 15px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

@media (max-width: 480px) {
  .folio-modal.modal.fade.in {
    position: fixed;
    top: 3%;
    right: 3%;
    left: 3%;
    bottom: 3%;
    width: auto;
    margin: 0;
    .modal-body {
      max-height: 350px;
      padding: 15px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

This should do the trick.

[balfred1345 5]

Thanks very much! That did the job! 

 

I really appreciate your sticking with me on this one, and solving the scrolling problem.

[ahansson89 57]

No problem :)