Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Accordion - shows the end of text and not the beginning on mobile phone

Featured Lock Resolved Issue
Hi

I'm using Accordion addon with different lines and when click an accordion line to open on a mobile phone, then scroll down to the next one, the 2nd shows up with the end of the text and not the bottom, it's scrolling down automatically, which is not logical. It shouldn't scroll down but should show the beginning of text. See video here: https://youtu.be/TjMnloZK_3s

is this a bug or can I change this with some settings options? thanks in advance.

16 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. We are extremely sorry that your issue yet exists. But i can provide you a temporary solution for your issue. Please use this code into the given location of the code.
location: templates/shaper_helix3/js/main.js http://prntscr.com/lohhke
just after the jQuery call.


$(".sppb-panel-heading").on("click", function () {

setTimeout(()=>{
let contentDiv = document.querySelector('.sppb-panel-heading.active + .sppb-panel-collapse');
if(contentDiv === null )
return

$('html,body').animate({
scrollTop: contentDiv.offsetHeight
},'slow');

},100)


});


-Best Regards

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Please click the top elements then the element won't hide. If you click from bottom then it's obvious that you need to scroll top to view the top elements.
Hope you get my point.

-Best Regards

selma123

More than a month ago #Permalink
Hi Sifat,

Thanks for your hint, unfortunately I don't get the point :-/. I just click the next accordion point below the previous one and then it shows the bottom of the clicked one.

Thanks in advance for more details maybe.

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. Yes now i've found the exact issue on mobile devices.
Don't worry i've added this to our todo list( which is quite long ).
Hopefully our developers will take care of this and we'll fix this in the future update.


-Best Regards

selma123

More than a month ago #Permalink
Hi, in the meantime there were 3 SPB updates, but this issue as described above is still not fixe. I understand that your todo list is quite long, but can you check please, if this has been included in the last updates just to be sure if there is another bug on my page? thanks in advance.

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. I found this is in our todo list( and it requires some more R&D ) and no it's not solved yet. But it may take some time to solve this since it's actually accordions default behaviour. You can check the change log to know about what is changing in any update http://prntscr.com/la7t6l

-Best Regards

selma123

More than a month ago #Permalink
Hi,

I have installed the latest version 3.3.6 of SPB and still the issue is not solved, the customer is complaining since July. I fully understand that you have a long todo list but since most visitors access the website via mobile, they cannot read anything at all without scrolling the full page back up again. this is absolutely a non native behaviour which must be adjusted very seen, that's a major bug.

in last update there is only this update mentioned: "Accordion addon Custom option added." Can I change there anything in the settings to solve this problem? Haven't found it.

thanks again for your feedback or maybe a CSS hack solution in the meantime.

best regards,

selma123

More than a month ago #Permalink
Hi Sifat,

Thanks a lot for your temporary solution. I'm not sure where exactly to insert the code part. Ist this code in main.js correct?

/**
* @package Helix3 Framework
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2016 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/

jQuery $(".sppb-panel-heading";).on("click", function () {



setTimeout(()=>{

let contentDiv = document.querySelector('.sppb-panel-heading.active + .sppb-panel-collapse');

if(contentDiv === null )

return



$('html,body').animate({

scrollTop: contentDiv.offsetHeight

},'slow');



},100)





});

(function ($) {

// ************ START Helix 1.4 JS ************** //
// **************************************************** //

//Default
if (typeof sp_offanimation === 'undefined' || sp_offanimation === '') {
sp_offanimation = 'default';
}

if (sp_offanimation == 'default') {
$('#offcanvas-toggler').on('click', function (event) {
event.preventDefault();
$('.off-canvas-menu-init').addClass('offcanvas');
});

$('<div class="offcanvas-overlay"></div>').insertBefore('.offcanvas-menu');
$('.close-offcanvas, .offcanvas-overlay').on('click', function (event) {
event.preventDefault();
$('.off-canvas-menu-init').removeClass('offcanvas');
});
}

// Slide Top Menu
if (sp_offanimation == 'slidetop') {
$('#offcanvas-toggler').on('click', function (event) {
event.preventDefault();
$('.off-canvas-menu-init').addClass('slide-top-menu');
});

$('<div class="offcanvas-overlay"></div>').insertBefore('.offcanvas-menu');
$('.close-offcanvas, .offcanvas-overlay').on('click', function (event) {
event.preventDefault();
$('.off-canvas-menu-init').removeClass('slide-top-menu');
});
}

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. Please check this screencast https://files.fm/u/uas7jb6b
I think this should help you :)

-Best Regards

selma123

More than a month ago #Permalink
Hi, thank you, I have added your code but it's still the same. My main.js file didn't look the same like yours at the beginning, I didn't have a previous code there to replace, after jquery there was already "START Helix 1.4 JS..."

See screenshot, how my file looks like now. Is this correct? thank you in advance.

Attachments (1)

  • Bildschirmfoto 2018-11-30 um 09.40.29.png
    Bildschirmfoto 2018-11-30 um 09.40.29.png 150 KB

Sifat - Staff

More than a month ago #Permalink
Hi,
Please PM me your admin access.
click on my avatar to get that option

-Thanks

selma123

More than a month ago #Permalink
Hi Sifat, I'm coming back to this issue which is persisting since August 2018. I've installed latest rerlease of 25.1.2019 but still the same scrolling issue. See below your response 2 month ago via private message - Any update on this? It's not a common behaviour to scroll to the end of an article when I want to start reading one and I don't see the beginning of the text/Top of the article:
__
Hi,
I've inserted and tested that in your site. Actually we discourage to use much content in accordion. Since it's used only for a little content.
I've commented the code since it'll only work if you use only accordion in any page. Nothing else.

So, the current functionality what you are trying isn't possible right now. I'll talk to the developers about it. Since this addon is used by more than thousand users we can't change such functionality suddenly. You can also check bootstrap accordion. All the accordion functions in the same way.

But i can assure you that after proper R&D if our developers find this feature helpful they'll sure implement this.

Hope you'll understand.


-Thanks
__

thank you in advance for your update on this.

Sifat - Staff

More than a month ago #Permalink
Hi,
It's still in our request list. I would suggest to use less content in accordion and that's what i can suggest.
You can check other accordions as well to get to know how accordions work actually.

-Thanks

selma123

More than a month ago #Permalink
Hi there,

Just wanted to know if this issue is still on your request list, since after the latest release it's still the same? We have quite a lot of different accordions which would be a lot of work to change to another 3rd party accordions. thank you in advance.

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. I've talked with the developers about that and they ensured that it's default feature of accordion. You can check this from the bootstrap accordion https://getbootstrap.com/docs/4.0/components/collapse/
That's why it's still in our feature requests list. Since we can't change the default behaviour of an accordion.

-Thanks for understanding


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 106
Sifat

Sifat

Total Accepted Answers: 102
Toufiq

Toufiq

Total Accepted Answers: 41
Pavel

Pavel

Total Accepted Answers: 4
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us