Jump to content


Photo
Folio

Scrolling Modal in Folio



Best Answer ahansson89 , 16 October 2013 - 03:34 PM

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

Go to the full post


  • Please log in to reply
11 replies to this topic

#1 balfred1345

balfred1345

    Advanced Member

  • Members

  • 81 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 02 October 2013 - 05:57 PM

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.webhos...nsemble-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



#2 ahansson89

ahansson89

    Advocate

  • Members

  • 508 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 02 October 2013 - 09:42 PM

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/p.../DMS/issues/437



#3 balfred1345

balfred1345

    Advanced Member

  • Members

  • 81 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 02 October 2013 - 10:23 PM

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



#4 ahansson89

ahansson89

    Advocate

  • Members

  • 508 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 03 October 2013 - 09:11 AM

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



#5 balfred1345

balfred1345

    Advanced Member

  • Members

  • 81 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 03 October 2013 - 01:25 PM

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.



#6 balfred1345

balfred1345

    Advanced Member

  • Members

  • 81 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 14 October 2013 - 05:09 PM

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



#7 ahansson89

ahansson89

    Advocate

  • Members

  • 508 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 14 October 2013 - 11:23 PM

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/p.../DMS/issues/437
All updates on the issue will go in here.

I will see if I can fix it sometime tomorrow.



#8 ahansson89

ahansson89

    Advocate

  • Members

  • 508 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 16 October 2013 - 02:25 PM

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


#9 balfred1345

balfred1345

    Advanced Member

  • Members

  • 81 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 16 October 2013 - 03:07 PM

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



#10 ahansson89

ahansson89

    Advocate

  • Members

  • 508 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 16 October 2013 - 03:34 PM   Best Answer

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



#11 balfred1345

balfred1345

    Advanced Member

  • Members

  • 81 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 16 October 2013 - 03:46 PM

Thanks very much! That did the job! 

 

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


  • ahansson89 likes this

#12 ahansson89

ahansson89

    Advocate

  • Members

  • 508 posts
  • Framework Version:DMS
  • Country: Country Flag

Posted 16 October 2013 - 03:47 PM

No problem :)







Also tagged with one or more of these keywords: Folio