Accordion images not displaying on page load

Hi. If the images do show up after resizing the screen, most likely they are incorrectly resized when the slider loads. This can happen if the accordion loads inside an invisible container, which can affect its sizing calculations. The solution would be to programmatically trigger a resize as soon as the accordion becomes visible, but the exact implementation depends on the exact context.

Best,
David

Hi David, good to hear from you. I am using the Accordion Slider shortcode within a tabs widget. Earlier I had an issue with the images not showing up on the second tab and some JS fixed that something like: “……(‘.e-n-tabs’).on(‘click’, function() { …(‘.accordion-slider’).accordionSlider(‘resize’);…..” But for some reason this time the images aren’t showing up at all. They will show up after clicking either of the two tabs, but on the initial page load they don’t appear. ANy insight onto the JS required? I attached an image showing my setup in Elementor https://postimg.cc/3kHvY4L3 Thanks and best regards

• This reply was modified 7 months, 3 weeks ago by planetboris.

Hi David, good news, I switched widgets and no longer have that issue. I am using the nested tabs element from Elementor with shortcodes and it works fine. So the issue was probably some incompatibility with the previous tabs widget from Essential Addons. I have one issue remaining with the appearance of text on one of the panels. I attached screenshots so you can see the problem. I have 2 shortcodes for 2 accordions. Only the second one has a problem, and it is only for the first panel, the remaining four panels display the headings correctly. You can see in he first image https://postimg.cc/RJRsLSdY the settings for the panel (same settings for all panels), it looks fine in the editor. The second image https://postimg.cc/zy6rg7Vg you can see a panel from the same accordion shortcode displaying correctly. The third image https://postimg.cc/p5X775mv shows the display anomaly, aligned to the right side with the background overlay truncated. Hope you can help, thanks.

• This reply was modified 7 months, 3 weeks ago by planetboris.

Hi. The previous issue was probably due to instantiating the accordion while not being visible yet, the same issue that prevents it to resize correctly in the other tabs. The current issue could be caused by some theme/plugin CSS. Can you post a link to the page so I can see exactly what it is? I

Best,
David

The issue occurs in mobile view, it’s the second accordion, no. 2 https://mokouzin.com/les-musiciens/

Please try this:

p.as-layer {
     width: fit-content !important;
}

Best,
David

That’s great David, thanks alot, it works! There is one other bug that happens once in a while. I get one of your demo images showing on the live page where the Accordion Slider is placed. Today I was editing the panels and I noticed the following url was placed in the Retina source field of all the panels: https://bqworks.net/accordion-slider/images/[email protected] So I’m sure that was the cause and I removed them. What do you think?

Yes, that was probably the cause. I’ve seen it happening before.

Ok thanks,will keep you posted once we go live and receive feedback about the slider. Cheers