• 0
Sign in to follow this  
Followers 0

Folio Scrolling Modal in Folio

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

@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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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;
     }
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks very much! That did the job! 

 

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

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem :)

Share this post


Link to post
Share on other sites
Sign in to follow this  
Followers 0