Jump to content

Archived

This topic is now archived and is closed to further replies.

balfred1345

Scrolling Modal in Folio

Recommended Posts

balfred1345    5
balfred1345

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
balfred1345    5
balfred1345

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
balfred1345    5
balfred1345

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
balfred1345    5
balfred1345

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
ahansson89    57
ahansson89

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
ahansson89    57
ahansson89

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
balfred1345    5
balfred1345

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
ahansson89    57
ahansson89
@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
balfred1345    5
balfred1345

Thanks very much! That did the job! 

 

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

  • Like 1

Share this post


Link to post
Share on other sites

  • Similar Content

    • Kedark
      By Kedark+
      Hello,

      what happened to the Folio? Yesterday I bought a folio installed - not working properly ...
      at the same time disappeared from the directory section of the DMS.

      Does anyone know what happened? Will there be a new and improved version? Do FOLIO gone for good?

      Regards, Kedark
    • martin.carrese
      By martin.carrese
      Hello,
      i need help about bugs i have with folio. I have several bugs :
      - icon in WP backend is a broken picture
      - on frontend, buttons that are supposed to be on the featured images are below
      - categories created in "folio" doesn't appear in DMS frontend, menu shows me normal articles categories.
       
      i deactivated all extensions, without effect on this problem
       
      i need you help, please,
      Thanks
       
       
      [attachment=2228:Capture d’écran 2014-06-02 à 15.46.02.png]
       
      [attachment=2229:Capture d’écran 2014-06-02 à 15.44.37.png]
       
       
       
    • diamond43
      By diamond43
      Am trying to follow the limited instructions included with Folio but having a difficult time getting them to mesh with what I see on the screen.
       
      In the back-end of WP, the Folio install includes "Category" in the Folio menu. Apparently this is a category list intended for the folio custom post type only; ok I get that. I created one category and assigned it to the folio I set up.
       
      Back out front in the section settings area, we're told to pick a category from the drop-down, but the only categories that show up there are the standard post categories. No folio categories show up. And, yes, I created a folio. 
       
      What am I missing here?
    • ashbybp
      By ashbybp
      Hi,
      I'm embarrassed to ask this, but I can't figure out how to add a 'link' button to my folios. :huh:  I've put hyperlinks everywhere I can find them. No love. 
      I don't know if it makes a difference, but I'm trying to link it to a product page. 
       
      Please giveth your knowledge generously. 
       
      Thanks so much. 
       
      Best regards,
       
      Mary
×