Accordion images not displaying on page load

  • Resolved planetboris

    (@planetboris)


    1 year ago

    Hi David, hope you are doing well. In mobile mode the images are not displaying on page load. The placeholders load but the images don’t show. The scroll action works, but no images. The images show up as soon as you resize the screen, even by only 1px, either smaller or larger, then all of the images show up. I attached a screenshot https://postimg.cc/bZZtjHXn Also here are my settings I have in Accordion Slider for the mobile view: https://postimg.cc/K49jvkDD Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author bqworks

    (@bqworks)

    1 year ago

    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

    Thread Starter planetboris

    (@planetboris)

    1 year ago

    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

    Thread Starter planetboris

    (@planetboris)

    1 year ago

    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.

    Plugin Author bqworks

    (@bqworks)

    1 year ago

    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

    Thread Starter planetboris

    (@planetboris)

    1 year ago

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

    Plugin Author bqworks

    (@bqworks)

    1 year ago

    Please try this:

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

    Best,
    David

    Thread Starter planetboris

    (@planetboris)

    1 year ago

    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: http://bqworks.net/accordion-slider/images/image1@2x.jpg So I’m sure that was the cause and I removed them. What do you think?

    Plugin Author bqworks

    (@bqworks)

    1 year ago

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

    Thread Starter planetboris

    (@planetboris)

    1 year ago

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Accordion images not displaying on page load’ is closed to new replies.