Okay
  Public Ticket #2544279
Scrolling doesn't work when Amelia is embedded
Closed

Comments

  • Gemma started the conversation

    Hi there,

    I've just embedded Amelia into a page and I can't seem to scroll up and down the page with my mouse.

    Feels like there's some sort of bug somewhere.

    All my other pages use the same page template and there's no problem.

    Many thanks
    Gemma

  •  2,572
    Aleksandar replied

    Hello Gemma

    I can see the scroll is working, but it is rather slow.

    Please check your page builder and/or theme, and see if you have an option "Smooth Scrolling". If you do have that setting, just turn it off, and it should work fine.

    If you don't have that, please go to wp-content/uploads/amelia/css/amelia-booking.xhPHOnIp17.css and find this:

    scroll-behavior: smooth;

    Change that to:

    scroll-behavior: auto;
    

    And save the file, and that will correct the issue.

    We will modify this in our next update, so you won't need to do it again.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Gemma replied

    That's great - thanks very much - that's sorted the issue.

  • [deleted] replied

    You are welcome, Gemma. Glad to see the issue is gone, thank you for letting us know. 

    If you have any other questions or concerns feel free to open a new ticket and we will gladly help. 

  • Lucia replied

    Hello, 

    I'm having this same issue. The page keeps jumping up and down making it difficult to scroll. 

    I've tried looking for this inside of cpanel but it can't find the file: wp-content/uploads/amelia/css/amelia-booking.xhPHOnIp17.css See a screenshot of what I see. 

    2543349202.png

    Has this file changed? or how can I find it? 


  • Lucia replied

    Also, these are the files I see inside of Amelia booking. 


    8575139978.png


  • [deleted] replied

    Hello Lucia, 

    Could you please send me the URL of the page where you have Amelia so we could check it out? Also, are those all of the files that you have at location  wp-content/uploads/amelia/css?


  • Lucia replied

    I have the plugin on www.heyspanish.com and www.heyspanish.com/es 

    Please find attached a new screenshot with all the files. 

    4497118181.png
    6215646964.png



  • [deleted] replied

    Hello Lucia, 

    Apologies for replying a bit later, we don't work on weekends. 

    You need to find the file that is the created there the most recently, so the newest created file, as that one is active and change the scroll behavior to auto:

    scroll-behavior: auto;
    

    Please note that when you change something on the Customize page a new css file will be created, so you will need to apply the change again, as that new css file will be the one taken into consideration then. 

    You can also check which file is applied at the moment, in your database, in the wp_options table (it can have another prefix rather than wp_ depending on your database) you need to find and open/edit the amelia_settings option. In the JSON you will find this 

    "customization":{"primaryColor":"#1A84EE","primaryGradient1":"#1A84EE","primaryGradient2":"#0454A2","textColor":"#354052","textColorOnBackground":"#FFFFFF","font":"Roboto","hash":"s4UjYQSmPC"}

    so, in this case s4UjYQSmPC is the name of the css file that is active at the moment. 

    Another way of changing this is in one of the plugin's files (without looking for the css file that is active at the moment) , is this file:

    ../wp-content/plugins/ameliabooking/assets/less/frontend/_base.less

    You should find it and edit it , and on line 22 change

    "scroll-behavior: smooth;"

    to

    "scroll-behavior: auto;"

    and save that change. 

    You will need to apply this change after each update of Amelia. 


    If you have any other questions or concerns feel free to open a new ticket and we will gladly help out.




  • Lucia replied

    Hi, 

    I just tried to do this and it didn't work. I first tried here: 

    ../wp-content/plugins/ameliabooking/assets/less/frontend/_base.less (See screenshot) and still my pages: https://heyspanish.com/zoompeques/ and https://heyspanish.com/es/ aren't scrolling properly. 

    I also tried to do it inside of the css (see screenshot) and nothing happened. I obviously saved the changes in both cases. 

    Is there a way you can try to fix this on your end or accessing to my cpanel? 

    1728713751.png
    4836684413.png



  • [deleted] replied

    Hi Lucia, 

    The issue that this user had was that she couldn't scroll at all on the page. 

    I've just checked your other pages as well, and as I can see the scrolling on all of your pages is the same - no matter if Amelia booking form is on them or not, and the scrolling works.  Could you please send me an URL of a page where you don't have Amelia where you have a different scrolling than on a page where Amelia is? 



  • Lucia replied

    Hi again,

    That only happens in the pages where I have Amelia. 

    If you have a look at the whole website: www.heyspanish.com you'll see that the only pages with the issue are the ones with Amelia that I mentioned in my previous message. I don't have Amelia in these pages and the scrolling is fine:

    https://heyspanish.com/

    https://heyspanish.com/spanish-classes-for-kids/

    https://heyspanish.com/freeresources/

    https://heyspanish.com/blog/

    Regards,

    Lucia

  • [deleted] replied

    The issue is resolved in another ticket - the change in the ../wp-content/plugins/ameliabooking/assets/less/frontend/_base.less file wasn't applied because the plugin wasn't deactivated/activated after the change and cache deleted .

    If you have any other questions or concerns feel free to open a new ticket and we will gladly help out.


  •  4
    Gila Dávid replied

    Hy all

    I was using this method of smooth - to auto. Yet with the recent update, it has all changed and I can't get this to work anymore.

    1. Overwrite the file update update

    2. Deactivated plugin, back again

    3. cleared cache

    The scroll doesn't work again...

    What can we do about it now?

  •  4
    Gila Dávid replied

    Managed to solve it!

    I place this CSS rule into each page where the plugin widget exists.

    html {
      scroll-behavior: unset!important;
    }


    If you use the (old) method it won't change a thing 

    ../wp-content/plugins/ameliabooking/assets/less/frontend/_base.less 

    "scroll-behavior: smooth;"

    to

    "scroll-behavior: auto;"

    even if you change it here to unset instead of auto or smooth.

    Seems like it has to be done on the main CSS sheet 

    hope this will be helpful for others too

  • [deleted] replied

    Hi Gila Dávid,

    Thank you for letting us know, glad to see you found a solution to the scrolling issue you had,  and thank you for sharing your solution with other users. 

    If you have any other questions or concerns feel free to open a new ticket and we will gladly help out.